How to setup Tailwind CSS with WordPress.

Front EndTailwindCssWordPress
How to setup Tailwind CSS with WordPress.

If you are reading this post, I’m pretty sure you’ve already heard about Tailwind CSS.

Tailwind CSS is one of the best utility first CSS frameworks. It has tons of features like grid, flex, color swatches, responsive utility classes, tree shaking, night mood, you name it it’s there.

Tailwind CSS has pretty good documentation. They have instructions about how to setup tailwind with multiple frameworks and libraries like React, Vue, Laravel. They even have instructions for static site generators like NextJs, Gatsby, etc.

But they don’t have any guide about how to setup and use tailwind with WordPress. In this guide, I’ll try to show you how to use Tailwind CSS in your WordPress theme and plugin. Let’s get started.

Installing Tailwind CSS as a PostCSS plugin

There are multiple ways to config tailwind with WordPress. But I found using PostCSS is the easiest and reliable option. I’ll use a WordPress theme for this tutorial. You can use a plugin if you want.

  • You need to have NodeJS and NPM installed on your system. If you don’t have NodeJs installed you can download and install NodeJs from https://nodejs.org/en/. NodeJS comes preloaded with NPM.
  • Now navigate into your theme directory and open up terminal (cmd if you are in windows) and type this command.
npm init
  • Press “Enter” and then write the necessary informations like: package-name, version, description, entrypoint, etc. You can leave them blank and just press “Enter” and skip them if you want. There will a file created called package.json.
  • Now we need to install some packages. In order to do that type this command.
npm install -D autoprefixer postcss postcss-nested tailwindcss
  • “postcss-nested” is necessary if you want to use SCSS nesting. You can ommit this package if you don’t need css nesting.
  • Now we need to create a postcss config file. To do that create a file called postcss.config.js in the root of the theme directory.
  • Then paste these codes bellow in the file. This will include the necessary config to pre-process the Tailwind CSS and SCSS nesting.
module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer'), require('postcss-nested')]
}
  • Create a directory scss and inside that create a file called tailwind.scss and open the file. Include the tailwind modules in the file like below. Also don’t forget to copy the necessary comments from style.css because we’re going to replace the entire style.css. If you don’t want to do that you can keep the comments as before.
/*!
Theme Name: tailwind-theme
Theme URI: 
Author: Sazol
Author URI: https://mhsazol.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tailwind-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@tailwind base;
@tailwind components;
@tailwind utilities;
  • Now open packge.json and add these codes. These are responsible for live code change and build. Make sure to change the directory and filename followed by your own theme/plugin.
"scripts": {
    "dev": "postcss scss/tailwind.scss -o style.css --watch",
    "build": "postcss scss/tailwind.scss -o style.css"
  },
  • You should be able to see the compiled CSS in the style.css