How to set up Tailwind CSS (JIT) for WordPress

#

Contents

Installing Tailwind became a lot easier since this post was first written, so I have rewritten it. It also doesn’t require webpack now and is dozens times faster! Enjoy.

Before we start you will need:

  1. Local server (php, apache and MySQL)
  2. Node.js
  3. WordPress installed

Setting up a theme

You can use your own theme or go to underscores.me and generate a new one.

Enqueue your css in the functions.php file like this:

add_action( 'wp_enqueue_scripts', 'enqueue_function', 10 );
function enqueue_function() {
	$version = ( wp_get_environment_type() === 'development' ) ? time() : BIIIRD_THEME_VERSION;
	wp_enqueue_style( 'tailwind', get_template_directory_uri() . '/assets/css/main.css', $version, true );
}

The $version variable is just one very useful trick I use to swap the time() function for the theme version in production environment. To use it you have to define at the top of your functions.php the constant like this: define( 'BIIIRD_THEME_VERSION', '1.0.2' );.

Now in your theme folder create an assets folder, and inside it two folders named src and css. Inside the src folder create your css file and name it: main.css.

Installing necessary packages

  • Tailwind CSS
  • Autoprefixer
  • Postcss and postcss-cli

Open your terminal/command prompt and run this:

npm install -D [email protected] [email protected] [email protected] [email protected]

At this point you have everything you need installed.

Creating config files

Now create a tailwind.config.js file and put this object inside:

module.exports = {
	mode: 'jit',
	purge: [
		content: [
			'./src/**/*.php',
			'./template-parts/**/*.php',
			'./*.php',
			'./inc/**/*.php',
			'./inc/*.php',
			'./src/**/*.js',
		],
	],
	darkMode: false, //you can set it to media(uses prefers-color-scheme) or class(better for toggling modes via a button)
	theme: {
		extend: {},
	},
	variants: {},
	plugins: [],
}

This will be the file where you configure your tailwind setup, now that there is a 'jit' mode (which means Just-In-Time compilation) you probably won’t have to make much changes to this file. The purge item says which files should the compiler look for classes, you may have to modify it to fit your theme.

And one last file postcss.config.js, and inside it:

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	}
 }

Now in the /assets/src/main.css file put this: (you can ommit the first line if you just want tailwind as an addon to a sass project)

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

Adding a start script to npm

Open package.json file and modify the scripts object to add a watch script and tell it to run postcss:

"scripts": {
	"watch": "npx postcss ./assets/src/main.css -o ./assets/css/main.css --watch",
	"zip": "git archive --format zip --output C:\Users\{your_user_name}\Desktop\{your_theme_name}.zip main"
  },

By now everything should be working fine, run this in the terminal to initialize watching of your changes:

npm run watch

Now you can jump into the real fun, start using Tailwind classes wherever you want, the JIT compiler will look which classes you have used and will only put these into the main.css file!

Mike Kuczek

Mike Kuczek

WordPress developer, designer, psychology student and bluberry farmer. CEO of Biiird Studio.
❤ SHARE, THANK YOU ❤
Share on facebook
Share on twitter
Share on linkedin
Share on email

Improve performance of WP_Query

Using these three arguments as an addition to your’s can speed up the query process. Check the comments to be sure you can use them.

[wbcr_php_snippet id="820"]

Leave a Comment

Your email address will not be published. Required fields are marked *

Zasób 1

Switch to Polish: 

Ta strona korzysta z plików cookie, korzystając z niej zgadzasz się na ich wykorzystanie. Więcej informacji.