WP tailwindcss 101

How to Use Tailwind CSS in WordPress: A Step-by-Step Guide

Hey there! Ready to give your WordPress site a stylish makeover using Tailwind CSS? Buckle up, because we’re about to dive into a fun and straightforward tutorial on integrating Tailwind with WordPress.

What You’ll Need:

1. A WordPress website
2. Basic understanding of CSS and WordPress themes
3. A text editor (like VS Code or Sublime Text)
4. Some enthusiasm for making your site look awesome!

Step 1: Set Up Your Development Environment

First, let’s ensure you have a local development environment. If you don’t already have one, you can use tools like Local by Flywheel, XAMPP, or MAMP to set up WordPress on your computer.

Step 2: Install Node.js and npm

Tailwind CSS requires Node.js and npm (Node Package Manager). You can download and install them from the official Node.js website.

To check if they’re installed, run these commands in your terminal:

node -v
npm -v

Step 3: Create a Child Theme

Using a child theme ensures that your changes won’t be lost when the parent theme is updated.

1. Navigate to your WordPress theme directory: wp-content/themes/
2. Create a new folder for your child theme, e.g., my-theme-child
3. Inside this folder, create a style.css and functions.php file.

style.css:

/*
 Theme Name:   My Theme Child
 Template:     parent-theme-folder-name
*/

@import url("../parent-theme-folder-name/style.css");

functions.php:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>

Step 4: Set Up Tailwind CSS

Now, let’s get Tailwind CSS into your project.

1. Initialize npm in your child theme directory:

   cd wp-content/themes/my-theme-child
   npm init -y
   

2. Install Tailwind CSS and its dependencies:

   npm install tailwindcss postcss autoprefixer
   

3. Create Tailwind configuration files:

   npx tailwindcss init
   

   This will create a tailwind.config.js file in your theme directory.

4. Set up PostCSS:

   Create a postcss.config.js file in your theme directory with the following content:

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

5. Configure Tailwind to purge unused CSS in production:

   Open tailwind.config.js and set the purge option to scan your theme files:

   module.exports = {
     purge: ['./**/*.php', './**/*.js'],
     darkMode: false, // or 'media' or 'class'
     theme: {
       extend: {},
     },
     variants: {
       extend: {},
     },
     plugins: [],
   };
   

Step 5: Create Your Tailwind CSS File

Create a CSS file where you’ll use Tailwind directives. Let’s call it tailwind.css.

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

Step 6: Build Your CSS

You need to build your CSS file using Tailwind. Add a script to your package.json to automate this:

"scripts": {
  "build": "postcss tailwind.css -o style.css"
}

Run the build process:

npm run build

Step 7: Enqueue the Compiled CSS in WordPress

Your functions.php should already be enqueuing style.css, which now contains Tailwind CSS styles.

Step 8: Start Using Tailwind CSS in Your Theme

Now you can start using Tailwind CSS classes in your WordPress theme files. Open any of your theme’s PHP files and add Tailwind classes to the HTML elements.

For example:

<header class="bg-blue-500 text-white p-4">
  <h1 class="text-3xl font-bold">Welcome to My WordPress Site!</h1>
</header>

Step 9: Watch for Changes

While developing, you’ll want to automatically rebuild your CSS when you make changes. Add another script to your package.json:

"scripts": {
  "build": "postcss tailwind.css -o style.css",
  "watch": "postcss tailwind.css -o style.css --watch"
}

Run the watch script:

npm run watch

Conclusion

And there you have it! You’ve successfully integrated Tailwind CSS with your WordPress site. Now, you can easily apply beautiful, responsive styles to your website. Go ahead and experiment with different Tailwind classes to make your site look stunning!