Imagine you’re designing a custom WordPress theme for a client who wants a fast, visually appealing, and highly responsive website. Instead of writing complex CSS from scratch or dealing with bloated frameworks, you decide to use Tailwind CSS in WordPress.
Why? Tailwind CSS is a utility-first framework that allows you to style elements quickly using predefined classes. It eliminates the need for writing long custom stylesheets, keeping your WordPress theme clean, lightweight, and optimized for performance.
For example, you're building a homepage with a hero section, a call-to-action button, and feature cards. With Tailwind CSS in WordPress, you can create stunning layouts using simple class names like flex, grid, text-center, and bg-blue-500, instead of writing separate CSS rules for each element.
In this guide, we’ll show you how to install Tailwind CSS in a WordPress theme to speed up your workflow and quickly build high-performance websites.
Prerequisites for Installing Tailwind CSS in WordPress
1. Basic Requirements
- A WordPress site.
- A child theme or a custom theme where you can modify styles.
- Basic knowledge of CSS, JavaScript, and PHP.
2. Development Environment
- Node.js and npm installed to use Tailwind CLI or PostCSS.
- A code editor (such as VS Code) for modifying theme files.
How to Install Tailwind CSS in WordPress?
Step 1: Install Node.js and npm
Node.js and npm are required to run Tailwind CSS; ensure they are installed on your system before proceeding. You can verify this by running the following command in your terminal:
If they are not installed, follow the below steps.
-
For macOS and Linux:
1. Install Node Version Manager (nvm) by running:
2. Restart your terminal or run:
3. Install the LTS (Long-Term Support) version of Node.js:
During the installing LTS, if you get a “bash: tar: command not found” error, then you have to update/install package.
This means the tar command, which is essential for extracting compressed files (like the Node.js archive), is not installed on your system. You need to install it.
Here's how to fix it, depending on your Linux distribution:
-
Debian/Ubuntu/Mint (and derivatives):
Bash
-
Fedora/CentOS/RHEL (and derivatives):
Bash
-
Arch Linux/Manjaro (and derivatives):
Bash
4. Verify the installation:
This should display the installed versions of Node.js and npm.
-
For Windows:
1. Download the LTS version of Node.js from the official website.
2. Run the installer and follow the on-screen instructions.
After installation, open Command Prompt and verify:
Step 2: Navigate to Your Theme Directory
Install Tailwind CSS
Navigate to your WordPress theme directory using the following command:
Step 3: Install Tailwind CSS
Run the following command to create a package.json file, which will help manage dependencies for your project:
Now, install Tailwind CSS as a development dependency:
This will create a tailwind.config.js file, allowing you to customize Tailwind’s default settings and define which files it should scan for class usage.
Step 4: Set Up Tailwind to Scan Your Theme Files
To ensure Tailwind CSS applies only to the necessary files, configure the content property in your tailwind.config.js file. This allows Tailwind to scan your theme’s PHP and JavaScript files for class usage:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./template-parts/*.{php,html,js}","./*.{php,html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Step 5: Create and Compile the Stylesheet
1. Create a Source Folder: Create a new folder named src in your theme’s root directory.
2. Add a CSS File: Inside the src folder, create a new file named input.css and insert the following Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Compile Tailwind CSS: To generate the final CSS file, return to your terminal and run:
- The --watch flag ensures Tailwind automatically recompiles your CSS whenever you make changes to input.css.
- This command creates a dist folder in your theme directory, containing the compiled output.css file.
Step 6: Integrate Tailwind CSS into WordPress
To load the compiled CSS file in your WordPress theme, navigate to the functions.php file inside your theme directory and insert the following code:
function sv_theme_scripts() {
wp_enqueue_style( 'output', get_template_directory_uri() . '/dist/output.css', array() );
}
add_action( 'wp_enqueue_scripts', 'sv_theme_scripts' );
Most WordPress themes already utilize the wp_enqueue_scripts hook. If your theme does, simply add the following line inside the function attached to this hook:
