How to Install Tailwind CSS 4 in Laravel (Manual Setup) Using Vite

Introduction

Tailwind CSS 4 is now a default part of Laravel 11 and 12. However, if you're working with Laravel 10 or earlier—or if Tailwind was removed from your Laravel 11/12 project—this post will guide you through manually installing Tailwind CSS 4 using Vite.

Why Use Tailwind CSS in Laravel?

Tailwind CSS is a utility-first CSS framework that simplifies building custom user interfaces. It pairs exceptionally well with Laravel due to its speed, scalability, and full customization support.

Steps

01: Install Tailwind CSS and Vite Plugin

Run the following command to install Tailwind CSS 4 along with the Vite plugin:

npm install -D tailwindcss @tailwindcss/vite

02: Configure Vite

In your vite.config.js file, import and add the Tailwind plugin:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
});
    

03: Update app.css

Replace the contents of resources/css/app.css with:

@import "tailwindcss";

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

@theme {
    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}
    

04: Add @vite directive in Blade

In your main Blade layout file (like resources/views/layouts/app.blade.php), add:

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

05: Run the Dev Server

Now run the Vite development server to see Tailwind in action:

npm run dev

Conclusion:

Whether you're working in Laravel 10 or need to manually reinstall Tailwind CSS in Laravel 11/12, this guide has you covered. With Vite and Tailwind's seamless integration, you now have a modern, fast, and flexible frontend toolchain in place.