Setup Tailwind CSS in a WordPress plugin or theme

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

Tailwind CSS is a highly customizable, 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.

If you would like to watch an example tutorial , here it is:

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, and tailwindcss. ( Note that precss already installs autoprefixer package so we don’t need to install it separately. )

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": [
	"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": "^2.0.2",
		"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: [

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

./node_modules/.bin/tailwind init

Update the purge path in your tailwind.config.js file

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

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

module.exports = {
  plugins: [

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

 * 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 = [

			TWP_CSS_URI . 'editor.css',
			filemtime( TWP_CSS_PATH . 'editor.css' ),

		// Theme Gutenberg blocks JS.
		$js_dependencies = [

			TWP_JS_URI . 'editor.js',
			filemtime( TWP_JS_PATH . 'editor.js' ),


new Enqueue_Assets();

Now run npm run dev or npm run build. You will see the output in the build folder

Leave a Reply

%d bloggers like this: