Make your development and designing on WordPress faster!

Introduction

Let's touch down how Tailwind CSS works on WordPress efficiently and how Laravel Mix has a big impact on watching the PHP and the CSS files inside.

Let's jump on it!

Installation

So first, we need to install the following tools that we need.

Install Tailwind CSS

We must use version 3.4.17 since it's the compatible version to be used for now.

Install Tailwind CSS by running the npm command:

npm install -D tailwindcss@3

Configure tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./*.php",
    "./templates/**/*.php",
    "./inc/**/*.php",
    "./assets/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind Directives to Your CSS (src/main.css)

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

Start the Tailwind CLI Build Process

npx tailwindcss -i ./src/main.css -o ./src/main.css --watch

Install Laravel Mix

npm init -y
npm install laravel-mix --save-dev

Install BrowserSync

npm install -g browser-sync

Create a Mix Configuration File (webpack.mix.js)

let mix = require('laravel-mix');

mix.postCss("src/css/main.css", "dist/main.css", [
    require("tailwindcss"),
])
.browserSync({
    proxy: "http://wordpress-site.test", // Change this to your local WP URL 
    files: [
        "**/*.php",       // Watch all PHP files
        "dist/main.css"   // Watch the compiled Tailwind CSS
    ]
});

Update package.json Scripts

Add the following scripts to the package.json file:

"scripts": {
  "build": "mix",
  "watch": "mix watch"
}

Run the Build and Watch Commands

npm run build
npm run watch

Conclusion

By integrating Tailwind CSS and Laravel Mix into your WordPress theme development workflow, you can significantly improve efficiency and maintainability. Tailwind CSS provides a powerful utility-based approach to styling, while Laravel Mix simplifies asset management and live reloading with BrowserSync. This setup ensures that your styles are always up to date and that changes in your PHP files are instantly reflected in your browser.

With this approach, you can focus more on building great designs and functionality without worrying about manual CSS updates. Happy coding! 🚀