Florian Münch

Tailwind CSS as a utility-based framework ensures an incredibly efficient workflow when developing modern frontends. To use it in your WordPress Theme you could simply serve it from CDN. But for going beyond Tailwind’s rudimentary functionality you can’t avoid setting it up locally in your Theme. In this article we will set up Tailwind CSS in a WordPress Theme using gulp.js.

WPGulp and Gulp-PostCSS

To integrate Tailwind into your WordPress Theme you should install WPGulp first. WPGulp is a plugin to simplify gulp.js setups in WordPress. Additionally, you will need the gulp plugin of PostCSS to process Tailwind.

npx wpgulp
npm install -D gulp-postcss

Now you have installed a complete gulp setup that generates compact CSS files from SCSS. Inside your wpgulp.config.js you can configure your project paths and other variables. Specify the location of your SCSS files and where your CSS shall be generated. Since your project is now based on SCSS you should adapt your previous stylesheets.

Installing Tailwind CSS

At this point we are ready to integrate Tailwind into our theme:

npm install tailwindcss

Add Tailwind to your primary SCSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

To customize Tailwind individually, you can generate a config file:

npx tailwind init

In the created tailwind.config.js you can configure Tailwind as you like. More at

Integration von Tailwind CSS in gulp

Now we have everything we need to configure Tailwind with gulp. In our gulpfile.babel.js we will add PostCSS and Tailwind to the CSS-related plugins at first:

// CSS related plugins
// ...
const postcss = require( ‘gulp-postcss’ );
const tailwindcss = require( ‘tailwindcss’ );
// ...

Both plugins are imported into our gulp file as constants. Now we want gulp to use them. The gulp tasks styles and stylesRTL generate our finale CSS files and right-to-left stylesheets. Here we will insert PostCSS and Tailwind:

gulp.task( ‘styles’. () => {
  return gulp
    .src( config.stlyeSRC, { allowEmpty: true })
    // ...
    .pipe( postcss([
      tailwindcss( ‘./path/to/your/tailwind.config.js’ ),
      require( ‘autoprefixer’ )
    ]) )
    // ...
});
// ...
gulp.task( ‘stylesRTL’. () => {
  return gulp
    .src( config.stlyeSRC, { allowEmpty: true })
    // ...
    .pipe( postcss([
      tailwindcss( ‘./path/to/your/tailwind.config.js’ ),
      require( ‘autoprefixer’ )
    ]) )
    // ...
});
// ...

Once done we can test if our setup works by simply adding a Tailwind class i.e. bg-red-500 to any HTML element in one of your PHP files.

Now you can run npm start. If all the styles are generated successfully you can check your site if the new Tailwind styles are displayed correctly. If so, congratulations! You just have set up Tailwind CSS in your WordPress Theme. Now you can customize your Tailwind theme in the tailwind.config.js.

Author: Florian Münch

Setting up Tailwind CSS in a WordPress Theme using gulp.js

WPGulp and Gulp-PostCSS

Installing Tailwind CSS

Integration von Tailwind CSS in gulp

Links: