Install Tailwind CSS in Laravel: v4 with Vite

Install Tailwind CSS in Laravel TL;DR: Install the official Vite plugin, import Tailwind in app.css, declare your sources with @source, load assets with Blade’s @vite(), and run npm run dev or npm run build. This matches the latest Tailwind v4 and Laravel Vite docs.

What are the exact steps to install Tailwind v4 in Laravel?

Short answer: Install the Vite plugin, import Tailwind, add @source paths, load with @vite(), then run dev/build.

Create or open your Laravel project – Laravel 11/12 includes Vite scaffolding out of the box.
Install packages

npm i -D tailwindcss @tailwindcss/vite

Configure Vite (vite.config.js or .ts)

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

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

Create your CSS entry file (resources/css/app.css)

@import "tailwindcss";

/* Tell Tailwind where your classes live (v4) */
@source "../**/*.blade.php";
@source "../**/*.{js,jsx,ts,tsx,vue}";
@source "../../storage/framework/views/*.php";

In Tailwind v4, the @source directives inside your CSS replace the old content array in tailwind.config.js.

Load assets in Blade (e.g. resources/views/layouts/app.blade.php)

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

Run

npm run dev     # hot module replacement
npm run build   # production build

Why use the official @tailwindcss/vite plugin?

Short answer: It’s the simplest and most reliable way to integrate Tailwind v4 with Laravel, providing fast hot module replacement and minimal configuration.

How do I “expose” Blade/Vue/React files to Tailwind?

Short answer: Declare them using @source in your CSS so Tailwind can detect your classes.

If classes aren’t generated, widen your @source globs and include Laravel’s cached views under storage/framework/views.

How do I import Tailwind into my CSS and compile it?

Short answer: Add @import "tailwindcss"; at the top of app.css, then compile with Vite and load via Blade’s @vite().

What should I do for production builds and CI?

Short answer: Run npm ci && npm run build. Laravel’s Vite integration will generate versioned assets automatically and Tailwind v4 will purge unused CSS based on your sources.

Should I still use Laravel Mix?

Short answer: No for new projects. Vite is the default tool in modern Laravel versions. Use Mix only for legacy projects.

Common errors and quick fixes

Short answer: Most problems come from incorrect @vite paths, missing @source coverage, or misconfigured PostCSS.

If you see “Unable to locate file in Vite manifest…”, ensure the file paths in @vite() match actual compiled files.
If no utilities are generated, check your @source globs and include Blade, JS, TS, and Vue files plus cached views.
If PostCSS reports an error, use @tailwindcss/postcss when configuring Tailwind as a PostCSS plugin.
When upgrading from Tailwind v3, follow the official v4 upgrade guide; most configuration now lives in your CSS.

Helpful resources and ready-to-use UI

Tailwind + Laravel guide – official steps for v4 with Vite.
Laravel Vite documentation – explains @vite() directives, HMR, and versioned builds.
Tailwind v4 upgrade guide – explains the CSS-first model.

Tailkits internal links

Tailkits UI Components – 200+ components and sections.
Free Tailwind Sections – 30+ free blocks.
Tailwind Templates – ready-to-use landing pages.
Tailwind @ source Explained – deep dive into the @source directive.

Updated: October 29, 2025.

FAQ

Do I still need tailwind.config.js in v4?

Usually no. Tailwind v4 uses CSS directives like @source and @theme; you only need a configuration file when customizing themes or adding plugins.

Which files should I include in @source?

Include your Blade views, cached views under storage/framework/views, and any JS/TS/JSX/TSX/Vue files where you write class names.

Why aren’t my Tailwind classes showing up?

Your @source patterns might miss some files. Widen the globs to include all relevant Blade, JS/TS/Vue files and cached views, then rebuild.

How do I enable hot module replacement (HMR)?

Use Blade’s @vite() directive and run `npm run dev`; Laravel’s Vite plugin automatically injects the hot module reload client.