Laravel Mix Tailwind: Complete Setup Guide, JIT, Purge, HMR, and Production Tips

An Optimized Workflow for Development and Production

Using Laravel Mix with Tailwind CSS creates a powerful and streamlined frontend workflow. You get structured asset compilation, optimized production builds, and Tailwind’s utility-first system — all managed from one predictable pipeline. This guide walks you through installation, configuration, and best practices.

Prerequisites

Before starting, ensure your environment includes:

• Node.js LTS (18+)
• npm (9+)
• PHP & Composer
• Laravel 8+
• Terminal

Why This Stack?
Laravel Mix centralizes JavaScript bundling, PostCSS processing, Tailwind compilation, Autoprefixer support, and cache-busting versioning — all configured in one webpack.mix.js.

Project Setup & Dependency Installation

Create a new Laravel project:

composer create-project laravel/laravel mix-tailwind-demo
cd mix-tailwind-demo

Install required frontend dependencies:

npm install -D laravel-mix@^6.0.49 tailwindcss@^3.4 postcss@^8 autoprefixer@^10 postcss-import@^15

Initialize Tailwind:

npx tailwindcss init -p

Configure Tailwind, PostCSS & Mix

Update tailwind.config.js:

module.exports = {
  content: [
    './resources/views/**/*.blade.php',
    './resources/js/**/*.vue',
    './resources/js/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Update postcss.config.js:

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Update webpack.mix.js:

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

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer'),
   ]);

if (mix.inProduction()) {
    mix.version();
} else {
    mix.sourceMaps();
}

Create Stylesheet & Integrate in Blade

Create resources/css/app.css:

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

Reference compiled assets in your Blade layout:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

The mix() helper automatically resolves versioned assets in production.

Development & Production Builds

Development Build

npm run dev

Watch Mode

npm run watch

Hot Module Replacement

npm run hot

Production Build

npm run prod

Production builds purge unused Tailwind utilities and apply version hashes. A 3MB development file often becomes 5–15KB in production.

Best Practices

• Pin Versions: Keep compatible versions (Mix 6.x, Tailwind 3.x, PostCSS 8.x).
• Use @layer: Organize custom components inside Tailwind layers.
• Tighten Content Paths: Narrow scan paths in tailwind.config.js.
• Extract Vendor Libraries: Use mix.extract() for better caching.
• Avoid Dynamic Classes: Do not concatenate class names dynamically.

Frequently Asked Questions

What is the benefit of using Laravel Mix with Tailwind?

It centralizes asset compilation, versioning, PostCSS processing, and JavaScript bundling into a predictable workflow.

How does Tailwind JIT help?

The JIT engine generates utilities on demand and dramatically reduces final CSS size.

How do I handle cache busting?

Use mix.version() and always reference assets using the mix() helper.

Why are Tailwind classes not appearing?

Most commonly due to incorrect content paths in tailwind.config.js.

How do I fix PostCSS conflicts?

Align versions with Mix requirements. If needed:

rm -rf node_modules package-lock.json
npm install

Conclusion

You now have a production-ready Laravel Mix + Tailwind workflow. This setup ensures clean development, optimized production builds, and scalable frontend architecture.