How to Set Up Tailwind CSS in a Custom WordPress Theme — A Complete Guide

If you’re building a custom WordPress theme and want to modernize your front-end development with Tailwind CSS, you’re in the right place. Tailwind is a powerful utility-first CSS framework that makes building custom user interfaces fast and efficient.

In this guide, you’ll learn step-by-step how to integrate Tailwind CSS into your WordPress theme, from environment setup to writing your first Tailwind-powered markup.

Before we begin, make sure you have the following:

• A custom WordPress theme (or at least a theme folder ready)
• Node.js and npm installed on your machine
• A code editor (like VS Code)
• Basic familiarity with PHP and WordPress themes

Let’s get started!

Initialize Your Theme Project with npm

Start by opening your terminal and navigating to the root directory of your WordPress theme. This is where we’ll initialize Node.js to manage dependencies like Tailwind.

cd wp-content/themes/your-theme-folder
npm init -y

This will generate a package.json file, which keeps track of the packages used in your project.

Next, install Tailwind CSS along with PostCSS and Autoprefixer (required for processing and compatibility):

npm install -D tailwindcss postcss autoprefixer

After installation, initialize the Tailwind configuration. This will create a basic tailwind.config.js file in your theme directory:

npx tailwindcss init

Having Issues Installing Tailwind?

Some systems or Node versions might throw errors like:

npm ERR! could not determine executable to run

If you hit this issue, try resetting your installation environment like so:

rm -rf node_modules package-lock.json
npm install -D tailwindcss@3 postcss autoprefixer

This installs version 3 of Tailwind CSS, which is known for better compatibility and stability.

Next we need to configure PostCSS!

Tailwind uses PostCSS to compile the utility classes into usable CSS. You’ll need to create a postcss.config.js file in the root of your theme with the following content:

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

This tells PostCSS to use Tailwind and Autoprefixer as plugins during the CSS build process.

Create Your Input CSS File

Tailwind doesn’t provide a traditional CSS file. Instead, you define a custom CSS file where you “import” Tailwind’s base, components, and utility layers.
Here’s how to set that up:

• Add the following lines to input.css:
• Inside your theme folder, create a new directory named src.
• Inside src, create a file named input.css.

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

This file acts as the entry point for Tailwind to generate the final stylesheet.

Now, open the tailwind.config.js file and update it to scan your PHP files. This is important because Tailwind uses a “just-in-time” compiler to generate only the styles that are used in your markup.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

This configuration ensures that Tailwind processes any HTML or class names inside your theme’s PHP files.

You’re now ready to compile Tailwind into a usable CSS file.
Run the following command from your theme folder:

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

What this command does:

• -i ./src/input.css: Specifies the input file we created earlier.
• -o ./dist/output.css: Tells Tailwind where to output the final CSS.
• --watch: Keeps the process running and updates the CSS file in real-time whenever you save changes.

📂 Tip: Create the dist folder manually if it doesn’t exist yet.

At the end we need to enqueue tailwind css into our theme. To load the generated Tailwind CSS in your WordPress theme, open your functions.php file and add this function:

<?php
function mytheme_enqueue_styles() {
    wp_enqueue_style('tailwind', get_template_directory_uri() . '/dist/output.css', [], '1.0');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

This hooks into WordPress’s wp_enqueue_scripts action to include your custom CSS file in the front-end. You’re now ready to build beautiful and responsive layouts using Tailwind!

💡 Bonus: Enable Tailwind IntelliSense in VS Code

If you’re using Visual Studio Code, you can install a Tailwind extension for IntelliSense support, which provides:

• Class name suggestions
• Hover previews
• Error checking

Installation:

1. Press Ctrl+P (or Cmd+P on macOS) to open Quick Open.
2. Paste this and hit enter:

ext install bradlc.vscode-tailwindcss

This extension offers autocompletion and better developer experience when working with Tailwind. Once installed, VS Code will help you write Tailwind classes faster and with fewer typos.

You’ve now successfully integrated Tailwind CSS into your custom WordPress theme!
With Tailwind, you can:

• Design faster with utility classes
• Keep your CSS files small and optimized
• Maintain design consistency across your theme

Whether you’re creating a personal blog or a fully custom theme for a client, this setup offers flexibility and power right out of the gate.