When compared with Sass, TailwindCSS is better suited for rapid UI development with utility classes directly in the HTML. It is also becoming a popular choice in modern web development. In this step-by-step guide, you will learn how to integrate TailwindCSS into your WordPress theme.

Install TailwindCSS

Step 1: Install TailwindCSS

In the root of your theme, run the following codes to install TailwindCSS and create tailwind.config.js file.

npm install -D tailwindcss
npx tailwindcss init

Step 2: Configure template paths

In your tailwind.config.js file, add the paths to all of your template files.

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');

module.exports = {
  content: ['./*.php', './**/*.php'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Add the Tailwind directives to main CSS file

Create a folder named src, and inside it, add a new file called input.css. Then, add the following @tailwind directives to the file.

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

Step 4: Start the Tailwind CLI build process

Run the following command in the terminal to allow TailWindCSS to scan the template files for utility classes and then build the CSS into output.css.

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Enqueue TailwindCSS

Step 5: Enqueue the Compiled CSS in WordPress

Now, we can start to enqueue the output.css in the functions.php

<?php
function enqueue_tailwind() {
    wp_enqueue_style('tailwindcss', get_template_directory_uri() . 'src/output.css');
}
add_action('wp_enqueue_scripts', 'enqueue_tailwind');

Step 6: Start Developing!

You can now begin using TailwindCSS classes in your theme’s PHP files. For instance, update index.php as follows:

<header class="bg-blue-500 text-white p-4">
  <h1 class="text-3xl"><?php bloginfo('name'); ?></h1>
</header>
<main class="container mx-auto p-4">
  <?php
  if (have_posts()) :
    while (have_posts()) : the_post();
      the_title('<h2 class="text-2xl mb-4">', '</h2>');
      the_content();
    endwhile;
  endif;
  ?>
</main>