Tailwind CSS is a powerful utility-first framework that makes designing responsive and modern websites much easier. By integrating Tailwind CSS with WordPress, you can streamline your development process while achieving a highly customizable and visually appealing design. In this guide, we’ll walk you through how to use Tailwind CSS in your WordPress projects effectively.
Why Use Tailwind CSS with WordPress?
WordPress is a highly flexible content management system (CMS), but traditional themes often come with bloated CSS files and limited customization options. Tailwind CSS offers:
- Lightweight and optimized performance
- Highly customizable utility classes
- Faster development with reusable components
- Mobile-first design out of the box
By leveraging Tailwind CSS, you can build a unique and efficient WordPress theme without unnecessary styles and bulk.
Method 1: Using Tailwind CSS with a Custom WordPress Theme
Step 1: Install Node.js and NPM
To use Tailwind CSS in your WordPress project, first install Node.js and NPM (Node Package Manager), which are required to set up Tailwind.
Step 2: Set Up a Custom WordPress Theme
If you don’t already have a custom theme, create a new one inside the wp-content/themes/ directory.
cd wp-content/themes/
mkdir my-tailwind-theme
cd my-tailwind-theme
Step 3: Initialize Tailwind CSS
Inside your theme directory, run:
npm init -y
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
This will create a tailwind.config.js file where you can customize Tailwind settings.
Step 4: Configure Tailwind
Modify tailwind.config.js to include your theme files for purging unused styles:
module.exports = {
content: [
"./*.php",
"./**/*.php",
"./assets/**/*.js"
],
theme: {
extend: {},
},
plugins: [],
}
Step 5: Create a Tailwind Input File
Inside assets/css/, create a tailwind.css file with the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;
Then, compile Tailwind into a single CSS file:
npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/output.css --watch
Step 6: Enqueue Tailwind in WordPress
Add this to your theme’s functions.php file to load Tailwind’s compiled CSS:
function my_theme_enqueue_styles() {
wp_enqueue_style('tailwind-css', get_template_directory_uri() . '/assets/css/output.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
Now, you can use Tailwind classes in your WordPress theme files.
Method 2: Using Tailwind CSS with a Page Builder or Plugin
If you’re using a page builder like Elementor or Gutenberg, you can still leverage Tailwind CSS by adding the compiled Tailwind CSS file to your child theme or using a plugin that allows custom CSS.
- Upload Tailwind CSS to your WordPress theme and enqueue it as mentioned above.
- Use Tailwind classes in Elementor or Gutenberg by manually adding them inside HTML blocks.
Conclusion
Integrating Tailwind CSS with WordPress is a great way to build highly customizable and efficient themes. Whether you’re developing a custom theme or enhancing an existing one, Tailwind CSS gives you the flexibility and performance needed to create modern, responsive WordPress websites. Start experimenting with Tailwind CSS today and take your WordPress development to the next level!
Top comments (3)
3rd method: working on any HTML file expect where outer scripts are disabled
This is not a proper one, but work without any build.
take look this example: dev.to/pengeszikra/chuck-norris-to...
Tailwind version 4.0 got rid of configuring the engine using .js file all the configurations are done in .css file, and it's still hectic to set it up
This doesn't work with tailwind version 4