Tailwind Css Jit Wordpress Theme

Tailwind CSS is an awesome way of writing CSS – it completely transformed the way I write CSS. In this article I'll show you how to use Tailwind CSS in a WordPress theme, and how to set it up with npm.

First, we'll create the initial scaffold for our WordPress theme. Then, we'll install npm in our project. Finally, we'll install Tailwind and watch the magic happen. 🚀

Creating a WordPress theme from scratch
Installing npm in our project
Installing Tailwind in our project

Prerequisites

To install Tailwind CSS, you'll need to have npm installed. The best way to install npm is together with Node.js. If you have a Mac, go and install Homebrew, and run brew install node. If you have a Windows or Linux, download and follow the installation steps from the Node.js website.

Creating a WordPress theme from scratch

First, we'll create a WordPress theme from scratch. To do so, make a folder where you want to build your WordPress in. Then, add the following files:

Create style.css

This file holds the WordPress theme info and most of it's styling. In our situation, we'll only use it for our theme information and not for the styles. This gives us way more flexibility in the end and it makes sure that our theme info is not messed up in any way.

We'll place the styles in css/tailwind.prod.css (see later).

/*
 * Theme Name: THEME NAME
 * Theme URI: https://example.com
 * Author: THEME AUTHOR
 * Author URI: https://example.com
 * Description: Awesome description.
 * Version: 0.1.0
 * Requires at least: 5.0
 * Tested up to: 5.8
 * Requires PHP: 7.0
 * License:
 * License URI:
 * Text Domain: 'text-domain'
 */

Create functions.php

Next, we'll create our functions.php file. The main job of it is to load the CSS files on our frontend.

<?php
 
function rjs_styles() {
/*  General style.css file
    File is not enqueued because it only contains the theme configuration.
    CSS is generated inside css/tailwind.prod.css
*/
 
wp_enqueue_style( 'tailwindcss', get_template_directory_uri() . '/css/tailwind.prod.css', array(), filemtime(get_template_directory() .'/css/tailwind.prod.css'), 'all');
 
 
} //End of rjs_styles() function
 
//Load the files, hook them into the enqueue scripts
add_action( 'wp_enqueue_scripts', 'rjs_styles' );

Create index.php (default template)

This template is the default fallback WordPress template. It currently only loads the header and the footer.

<?php if (!defined('ABSPATH')) { exit; }?>
 
<?php get_header(); ?>
 
<?php get_footer(); ?>

Create header.php

The header.php file has all our configurations and a simple header.

<?php if (!defined('ABSPATH')) { exit; }?>
 
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="<?php bloginfo( 'charset' ); ?>"/>
 
<?php wp_head(); ?> <!-- Load WP objects for head-tag -->
</head>
 
 
<body <?php body_class(['bg-white']); ?> id="rjs_body" >
<?php if (!defined('ABSPATH')) { exit; }?>
 
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="<?php bloginfo( 'charset' ); ?>"/>
 
<?php wp_head(); ?> <!-- Load WP objects for head-tag -->
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
 
 
<body <?php body_class(['bg-white']); ?> id="rjs_body" >
<header>
    Header
</header>
 
 
<div class="rjs-page">

Create footer.php

The footer.php file closes the <div> that was opened in the header, contains a footer and closes the <body> and <html> tags.

<?php if (!defined('ABSPATH')) { exit; }?>
 
</div><!-- Closing of rjs-page -->
 
 
<footer>
    Footer
</footer>
 
 
<?php wp_footer(); ?>
</body>
</html>

That's it! Now you have a fully functioning WordPress theme and you're ready to install Tailwind in it💪

Installing npm in your WordPress theme

First, we'll need to create a package.json file in our project's root. This file contains the things your project depends on, like Tailwind CSS. Open your terminal and run

npm init

If it asks for the package name, hit enter (or change it, if you want). Hit enter on all steps, and type yes when it asks: "Is this OK? (yes)". BOOM, you now have created your package.json file!

Installing Tailwind and PostCSS

In order to use Tailwind in your WordPress theme, we need to install it as a so-called 'PostCSS' plugin. If this sounds daunting, don't worry! Just follow a few easy steps and you're ready to go🚀

Run the following code:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npm install -g postcss-cli

Next, go to your project's folder and create the following file: postcss.config.js with the following content:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Now, run the following command:

npx tailwindcss init

This will create a tailwind.config.js configuration file in the root of your folder. In this file you can specify the settings for Tailwind CSS. Make sure that the file looks like this, by adding the mode: 'jit' and purge: [] options:

module.exports = {
  mode: 'jit',                           //ADD THIS LINE
  purge: [                               //CONFIGURE CORRECTLY
    '**/*.php',
    '*.php',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Then, we'll create a tailwind.css file in our /css folder (css/tailwind.css). Add the following code.

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

The last step is to finish the PostCSS installation. Run the following code. This will install the PostCSS CLI (Command Line Interface), and we'll use it to compile the CSS.

I'll configure the following choices:

npm run watch: automatically recompile CSS on every change (JIT compiler)
npm run prod: do a one-off build

Open your package.json and change the scripts: {} section to the following:

"scripts": {
  "watch": "TAILWIND_MODE=watch postcss css/tailwind.css -o css/tailwind.prod.css -w",
  "prod": "NODE_ENV=production TAILWIND_MODE=build postcss css/tailwind.css -o css/tailwind.prod.css"
},

Now you can run npm run watch or npm run prod and your CSS will be automatically compiled🎉

Conclusion

As you've seen, it's not very difficult to use Tailwind CSS JIT in your WordPress theme (or plugin). All you need to do to install it, is following a few simple steps. Now that you've the fundamentals correct, you're ready to move on and build your WordPress theme further. If you've any questions, suggestions or if you want so showcase the theme you've made, just leave a comment below👇

Published by Ralph J. Smit on 13 July 2021 in Tailwind-css . Last updated on 10 March 2022 .