Setting Up Tailwind CSS with Laravel (Vite & Laravel Mix)

Introduction

Tailwind CSS is fully supported in Laravel and integrates smoothly with both Vite and Laravel Mix. Depending on your Laravel version and project setup, you can choose either build tool.

In this guide, you’ll learn how to set up Tailwind CSS in a Laravel project using the official and recommended configuration, including proper file scanning and build steps.

Option 1: Tailwind CSS with Laravel (Using Vite)

Recommended for Laravel 9+, 10, and 11

Why Use Tailwind with Vite in Laravel?

• Official default build tool in modern Laravel
• Faster hot reload
• Cleaner configuration
• Better long-term support

Step 1: Install Tailwind CSS and PostCSS Plugin

From your Laravel project root, run:

npm install tailwindcss @tailwindcss/postcss postcss

This installs Tailwind CSS and its required PostCSS integration.

Step 2: Configure Vite for Tailwind

Laravel already includes Vite configuration. You only need to ensure Tailwind is processed via PostCSS.

No additional Vite plugin is required in Laravel.

Step 3: Import Tailwind CSS

Open:

resources/css/app.css

Add the following:

@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

These @source directives allow Tailwind to scan Blade and JS files correctly.

Step 4: Run the Development Server

npm run dev

Vite will compile Tailwind CSS and watch for changes.

Step 5: Use Tailwind in Blade Files

Make sure your layout includes the compiled CSS:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Example usage:

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

If the styling appears correctly, Tailwind is successfully configured.

Option 2: Tailwind CSS with Laravel (Using Laravel Mix)

Useful for older Laravel projects

Why Use Laravel Mix?

• Existing legacy projects
• Webpack-based workflow
• No Vite migration required

Step 1: Install Tailwind CSS

Run the following command:

npm install tailwindcss @tailwindcss/postcss postcss

Step 2: Configure Laravel Mix

Open webpack.mix.js and add Tailwind as a PostCSS plugin:

mix
  .js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("@tailwindcss/postcss"),
  ]);

Step 3: Import Tailwind CSS

Open:

resources/css/app.css

Add:

@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

Step 4: Run Laravel Mix

npm run watch

This compiles Tailwind CSS and watches for changes.

Step 5: Use Tailwind in Blade Templates

Ensure the compiled CSS is included:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Example:

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

Laravel Vite vs Laravel Mix

Common Mistakes to Avoid

• Mixing Vite and Mix in the same project
• Forgetting @source directives
• Not importing app.css correctly
• Using outdated Tailwind setup guides

Interview Questions and Answers

1. How do you install Tailwind CSS in Laravel?

By installing tailwindcss and @tailwindcss/postcss via npm and configuring either Vite or Laravel Mix.

2. Which build tool is recommended for Laravel?

Vite is recommended for Laravel 9 and above.

3. Why are @source directives important?

They allow Tailwind to scan Blade and JS files for utility classes.

4. Can Tailwind work with older Laravel versions?

Yes, using Laravel Mix.

5. Is Tailwind CSS production-ready in Laravel?

Yes, it is widely used in production Laravel applications.