Using Tailwind CSS In Your WordPress Theme

In this tutorial we're going to look into how we can use tailwind css in your WordPress theme.

If you don't already know Tailwind CSS is a highly customisable utility first CSS.

If you would like to read more about utility first CSS libraries you can find out more from the below articles

• Using a utility CSS library
• Utility first

Normal WordPress theme development doesn't tend to use modern frontend development techniques such as npm and webpack. In this tutorial we're going to setup our WordPress theme to use webpack to compile our CSS file which will use Tailwind with Post CSS.

#Setup NPM

Inside your theme folder first you need to create a package.json file and with the following dependencies. Here we're using laravel mix and tailwindcss. Laravel mix allows you to easily use webpack config such as postCss to compile your CSS.

Then we have the build scripts to prepare your resources for development or production.

{
  "name": "tailwinds-wordpress",
  "version": "1.0.0",
  "description": "Tailwinds WP Theme",
  "dependencies": {
    "cross-env": "^6.0.3",
    "laravel-mix": "^5.0.0",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^1.1.2"
  },
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }
}

With the dependencies defined then run npm i for them to be installed.

#Create The Tailwind Configg

When you first install tailwind you need create the config file, you do this by running the command npx tailwind init this will create a tailwind.config.js file in the root of your theme.

#Webpack Config

Create a file in the root of your theme called webpack.mix.js this is what Laravel mix will use to compile your resources.

Paste the following code into your mix config file which will take a theme-style.css file and compile it using post CSS into a style.css file, this is the file that WordPress will use to create your theme.

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.postCss('./theme-style.css', './style.css',
  tailwindcss('./tailwind.config.js')
);

#Theme Styling

Inside the theme-style.css file we need to import the tailwind css components by using the @import keyword.

@import "node_modules/tailwindcss/base.css";

@import "node_modules/tailwindcss/components.css";

@import "node_modules/tailwindcss/utilities.css";

#Building The CSS

With this all setup you need to compile the CSS by running the command npm run dev. This will build you a new style.css file that WordPress can use on your theme.