Setup Tailwind CSS in a WordPress plugin or theme — for Gutenberg

In this blog we will discuss how we will setup Tailwind css in a WordPress plugin or theme.

Tailwind CSS is a highly customisable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Demo Plugin

Lets setup webpack babel in your WordPress plugin or theme by creating assets folder

cd assets
npm init --yes

This will create package.json file

We would need these packages postcss-loader , precss tailwindcss

Add this to your package.json file and run npm install This will install all packages required.

"scripts": {
		"build": "cross-env NODE_ENV=production webpack --mode production --progress",
		"dev": "cross-env NODE_ENV=development webpack --watch --mode development --progress",
		"clean": "rm -rf build/*"
	},
	"keywords": [
		"wordpress",
		"themes"
	],
	"author": "Imran Sayed",
	"license": "MIT",
	"private": true,
	"devDependencies": {
		"@babel/core": "^7.11.1",
		"@babel/preset-env": "^7.11.0",
		"@babel/preset-react": "^7.10.4",
		"babel-loader": "^8.1.0",
		"clean-webpack-plugin": "^3.0.0",
		"cross-env": "^7.0.2",
		"css-loader": "^4.2.1",
		"cssnano": "^4.1.10",
		"file-loader": "^6.0.0",
		"mini-css-extract-plugin": "^0.9.0",
		"node-sass": "^4.14.1",
		"optimize-css-assets-webpack-plugin": "^5.0.3",
		"postcss-loader": "^4.0.1",
		"precss": "^4.0.0",
		"sass-loader": "^9.0.3",
		"sass-mq": "^5.0.1",
		"style-loader": "^1.2.1",
		"tailwindcss": "^1.8.10",
		"uglifyjs-webpack-plugin": "^2.2.0",
		"webpack": "^4.44.1",
		"webpack-cli": "^3.3.12"
	},

Now create a webpack.config.js file and add the configurations

Notice that we are adding the `postcss-loader` in webpack file

{
    test: /\.scss$/,
    exclude: /node_modules/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'postcss-loader',
      'sass-loader',
    ]
  },

Now run the below command to generate the tailwind.config.js file

./node_modules/.bin/tailwind init

Update the purge path in yourtailwind.config.js

module.exports = {
  darkMode: false,
  purge: [
    // Paths to your templates...
    "../**.php",
    "../**/**.php",
    "./src/js/**.js"
    ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Now add the postcss.config.js file with following configurations

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('precss'),
    require('autoprefixer')
  ]
}

Now add this in your sass file

// Tailwinds
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

When you run npm run dev its going to output the tailwind css in the build/css/editor.css

You can enqueue this css file in the editor like so

<?php
/**
 * Enqueue Assets
 *
 * @package twp-example
 */
class Enqueue_Assets {
	/**
	 * Constructor.
	 */
	public function __construct() {
		/**
		 * Actions.
		 */
		add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_editor_assets' ] );
	}
	/**
	 * Enqueue editor scripts & styles.
	 *
	 */
	public function enqueue_editor_assets() {
		// Theme Gutenberg blocks CSS.
		$css_dependencies = [
			'wp-block-library-theme',
			'wp-block-library'
		];
		wp_enqueue_style(
			'twp-editor-css',
			TWP_CSS_URI . 'editor.css',
			$css_dependencies,
			filemtime( TWP_CSS_PATH . 'editor.css' ),
			false
		);
		// Theme Gutenberg blocks JS.
		$js_dependencies = [
			'wp-block-editor',
			'wp-blocks',
			'wp-editor',
			'wp-components',
			'wp-compose',
			'wp-data',
			'wp-element',
			'wp-hooks',
			'wp-i18n',
			'wp-blocks',
			'wp-i18n',
			'wp-element',
		];
		wp_enqueue_script(
			'twp-editor-css',
			TWP_JS_URI . 'editor.js',
			$js_dependencies,
			filemtime( TWP_JS_PATH . 'editor.js' ),
			true
		);
	}
}
new Enqueue_Assets();