Laravel 12 with TailwindCSS 3

Laravel_12_TailwindCSS_3.md

1. Remove TailwindCSS Vite plugin:

npm remove @tailwindcss/vite

2. Update vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

3. Remove TailwindCSS4 & install TailwindCSS3, generate tailwind.config.js:

npm remove tailwindcss
npm install -D tailwindcss@3 @tailwindcss/forms
npx tailwindcss init

4. Override tailwind.config.js to look for Blade files:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [forms],
};

5. Install PostCSS & Autoprefixer:

npm install -D postcss autoprefixer

6. Setup postcss.config.js:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

7. Update resources/css/app.css (or your custom CSS entry file):

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

8. Build with Vite:

npm run build

Congratulations, you're now using TailwindCSS3 with Laravel 12!

X. BONUS: Enabling postcss.config.js for using it alongside TailwindCSS4 in Laravel 12:

Follow the prior steps, 1. and 2., and remove the Vite plugin for TailwindCSS. Then:

npm install -D @tailwindcss/postcss

and update your postcss.config.js as follows:

export default {
    plugins: {
        '@tailwindcss/postcss': {},
    },
};

Sadly, this way doesn't pick up an additional tailwind.config.js file, as by default TailwindCSS4 has changed it to be configured via CSS.

For an extended explanations why-and-how, check the blog version of Using TailwindCSS3 on Laravel 12

Thank you.

I was building a small content management with Filament v3 and needed to customize theme and notice they don't yet support Tailwind v4, this helped solve the issue.

Hey, I'm glad it helped! It was actually the exact same reason I stumbled onto figuring this all out as well. 😄