Install Tailwind CSS in Laravel

Prerequisites

• Laravel 12 (or 11/10) with Vite enabled, Node ≥ 18, and npm/yarn/pnpm installed.

If you’re starting fresh, composer create-project laravel/laravel my‑project scaffolds Vite out of the box

1. Create or open your Laravel project

Laravel’s official starter kits come pre‑configured for Vite and speed you past initial authentication and routing boilerplate.
Developers upgrading from Mix can keep their existing code and switch to Vite later with Laravel’s migration guide.

2. Install Tailwind CSS & friends

npm install -D tailwindcss @tailwindcss/vite postcss autoprefixer
npx tailwindcss init -p

The dedicated @tailwindcss/vite plugin offers faster HMR than the generic PostCSS approach.

3. Configure Vite

In vite.config.js (or .ts) load the plugin:

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(),
  ],
});

Laravel detects your CSS/JS entry files automatically

4. Point Tailwind at your Blade & Vue/React files

Edit tailwind.config.js:

export default {
  content: [
    './resources/views/**/*.blade.php',
    './resources/js/**/*.{js,vue,jsx,ts,tsx}',
  ],
  theme: { extend: {} },
  plugins: [],
}

The content array tells Tailwind to tree‑shake unused classes for lean builds.

5. Import Tailwind into your CSS

Create resources/css/app.css (if it doesn’t exist) and add:

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

When you run the dev server, Tailwind’s directives expand into real CSS.

6. Compile assets

npm run dev      # fast HMR for local work
npm run build    # minified production bundle

Vite handles cache‑busted filenames and automatic Blade injection via @vite('resources/css/app.css') in your layout.

7. Going to production

Run npm run build in your deploy pipeline; Vite emits versioned assets Laravel maps at runtime, so zero manual edits are required on the server.
CDNs and Laravel Vapor work too—just ensure the compiled public/build folder is pushed with your release.

Common Issues

FAQ

Do I need Laravel Mix to use Tailwind?

No; Laravel’s default Vite setup is faster and easier to maintain.

Can I add Tailwind to an existing Laravel 9/10 project?

Yes—just install the Vite plugin, update your config files, and recompile assets.

Does Tailwind work with Blade components and Livewire?

Absolutely; include those .blade.php paths in the content array and Tailwind will detect the classes. Tailwind CSS

How do I keep my CSS small in production?

Run npm run build or vite build; Tailwind purges unused styles automatically in production mode.