Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

twarezak's avatar

Laravel 12 and Tailwindcss 4

hello, I'm trying to start a new project on Laravel 12 with Tailwindcss. I have a problem with it because when I run npm run dev and open page in the browser, the app.css file is almost empty. It contain only:

@import "tailwindcss";
@source "../views";

I add it to the resources/css/app.css file based on this instruction for the tailwindcss doc.

In view I have:

<h1 class="text-center text-3xl text-red-600">Test Tailwind</h1>

so I'm expecting something more in the CSS file :D

My vite.config.js file looks like this:

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

Why in the browser the resources/css/app.css not contain any classes? What is missing? What am I doing wrong?

0 likes
6 replies
tisuchi's avatar

@twarezak Can you try this?


rm -rf node_modules package-lock.json
npm install
npm run dev
1 like
twarezak's avatar

@tisuchi thanks :) it helped. But I didn't have postcss.config.js. When I created it, everything started working.

Lazyy's avatar

Hey Bro I got a fix for You Whenever u start a new Laravel Project just run this command in the project directory .

npm install --save-dev vite laravel-vite-plugin

then when you want to run your application just run "npm run dev" and "php artisan serve"

and include this in every blade.php file in the head section

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

This is the one and only fix that i have got so far and works wonders .

Lazyy's avatar

This one i've posted earlier works for me .

Please or to participate in this conversation.