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

spetz83's avatar

Running npm run dev isn't compiling my css

I have a "legacy" application that I am trying to use tailwind and livewire with.

I ran through the livewire install instructions and the tailwind laravel instructions from tailwind's site.

When I run npm run build my css and js are compiled. I can refresh my page and see that the browser is picking up tailwind and displaying the page correctly.

If I run npm run dev the vite server spools up, no errors or anything. When I refresh the page I would expect to see the correctly rendered HTML and CSS. However, the page re-renders with NO css whatsoever applied to it. If I kill the dev process and refresh the page... still broken. I have to run npm run build again for the css to compile and work correctly.

Any direction on what I might be missing here is greatly appreciated.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      './resources/**/*.blade.php',
      './resources/**/*.js',
      './resources/**/*.vue'
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
}

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

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.6",
        "autoprefixer": "^10.4.15",
        "axios": "^1.5.0",
        "laravel-vite-plugin": "^0.8.0",
        "lodash": "^4.17.21",
        "postcss": "^8.4.29",
        "tailwindcss": "^3.3.3",
        "vite": "^4.4.9"
    }
}

resources/css/app.css

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

layout.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-gray-100">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Tailwind, Yo.</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
        @livewireStyles
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="antialiased h-full">
        <div class="min-h-full">
            <h1 class="text-red-600 font-medium">Tailwind?</h1>
         </div>
        @livewireScripts
    </body>
</html>
0 likes
8 replies
Tray2's avatar

I suggest checking your browsers dev tools under the network tab, and console tab. It will most likely tell you what is wrong.

spetz83's avatar

@Tray2 Thanks. Nothing there. No console errors. Network tab is normal. The CSS file is there, but it is empty when running npm run dev.

spetz83's avatar

Wanted to bump this. Surely there is someone on here that has ran into this before, or can at least point me in a direction.

spetz83's avatar

@cre-kamran-haider Thanks for the suggestion. Adding the --legacy-peer-deps flag did not change anything.

jolivar's avatar

Any solution? I'm having the same problem

SYED_IRTAZA_HASNAIN's avatar

The below solkution worked for me, Check laravel Logs, there might be issue you are not importing all files in your vite.cofing, Just for example in my app.blade im am using @vite(['resources/css/app.css', 'resources/js/app.js']) @vite('resources/css/app.css') @vite('resources/css/extra.css') @vite('resources/css/partical.css') @vite('resources/css/scroll.css') @vite('resources/css/faqs.css') @vite('resources/css/animate.css')

so in my vite.config.js, i have to add these, suppose in case you have 2 vite.config.js and vite.config.js.timestamp , you have to add in both

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

in my package.json "scripts": { "delhot": "npx rimraf public/hot", "dev": "vite", "build": "npm run delhot && vite build" }, This solution worked for me, my app.css was not showing in frontend source code

Please or to participate in this conversation.