Here is my vite config https://snipboard.io/5Zo6Nk.jpg

Here is my app.css https://snipboard.io/EvBWmc.jpg

here is my view https://snipboard.io/VFb49k.jpg

to install tailwind in the project directory i ran. npm install tailwindcss @tailwindcss/vite

then updated my files then

npm run dev

Ive even tried npm install just in case there were any missing files. and there were but also that didnt fix the issue.

and here is the error when i try to build https://snipboard.io/5HXTlB.jpg

Here is a short video showing what I am doing

https://www.youtube.com/watch?v=RszHhXJKmcA

I had the exact same problem as @funkyjamma on a new Laravel project created with Herd but I followed @RemiM instructions and it now works.

@funkyjamma just run npm install @tailwindcss/postcss and then relaunch npm run dev

This package is problably missing in your package.json.

If you've followed the Tailwind v4 Laravel specific instructions at

https://tailwindcss.com/docs/installation/framework-guides/laravel/vite

but you're getting an error about postcss, delete your config file.

rm postcss.config.js

The instructions don't say to remove it. But it comes with Laravel. And its presence gets Vite confused about what you're trying to do.

Let's wait for Laravel's official support for Tailwind 4.

Tailwind's documentation is not useful.

I had the same case, to solved this please remove postcss.config.js file and these two packages from your package.json

"postcss": "^8.4.47",
"tailwindcss": "^3.4.13",

Then run npm install && npm install tailwindcss @tailwindcss/vite after that please follow the installation instruction from tailwindcss, and run npm run dev again.

It should be works correctly

@funkyjamma I simply upgraded from tailwind v3 to tailwind v4 in my laravel version 11 + inertia js 2.0 + react + typescript project by following the official upgrade guide from tailwind.

Before attempting this create a new branch of your project since the following commands will also modify your source files.

Simply run the following command:

npx @tailwindcss/upgrade

OR if you are using sail, prefix sail infront of the command:

sail npx @tailwindcss/upgrade

NOTE: remember to re run the npm server or rebuild assets after this with either of the below commands.

npm run dev

or

npm run build

OR if you are using sail

sail npm run dev

or

sail npm run build

This will upgrade everything including your npm dependencies, your previous config files and also your source files since several breaking changes were introduced.

You might want to watch for some edge cases before committing the changes though!

However fear not the above command worked as is and I had to do almost 0 changes. It even properly copied all my shadcn theme variables to resources/app.css and cleared some of the edge cases too!

The only thing I had to look out for was some hotfix I used for incorrect popover width for some shadcn components which was nothing major (just a minor visual bug) and it affected only 2 files. The fix was already available on github discussions and that solved it!! Just remember that if you were using some bruteforce or hacky tailwind solutions, you might want to look out for those!

I tried everything here. Wasted 5-6 hours on this and still could not get tailwind 4 to work. I have a Laravel install that was originally Laravel version 9 but was upgraded to v.11 about six months ago. I'm also running Filament 3 which complicates things maybe.

I really wish front end developers who produce open source packages would limit their caffeine intake and get some deep hobbies. The speed at which they feel the need to "innovate", push code and otherwise waste thousands of collective man-hours by constantly changing protocols and inventing new ways to complicate front end tech is mind boggling.

The new goal for front end package devs should be to see how few git pushes they can make.

Hi,

I don't know if I missed something here but as I see it author is trying to make it work with VITE and all the tutorials are for POSTCSS.

Never the less it did help me find a solution!

I have fresh Laravel 12 project and I followed all the instructions for TAILWIND/VITE and it didn't work.

In this post I found command: npm uninstall tailwindcss postcss

And after I ran it, it started working!

I struggled to bootstrap Tailwind CSS 4 (TW4) in a fresh Laravel 12 project using Blade templating, as the official Tailwind docs focus on SPA setups (React, Vue, etc.), and Laravel’s default Vite integration is tailored for Tailwind CSS 3 (TW3). Specifically, the laravel-vite-plugin and @vite directive rely on TW3’s PostCSS workflow, pulling in unnecessary dependencies like postcss, tailwindcss, and autoprefixer, and causing asset path issues (e.g., url(/assets/...) breaking in production). My solution was to drop all TW3-related packages, install TW4’s @tailwindcss/vite plugin, and create a custom ViteServiceProvider to replace laravel-vite-plugin’s functionality. This approach eliminates PostCSS, ensures TW4 compatibility, and uses base: './' in vite.config.js for portable asset paths (e.g., url(./...)) that work on subdomains (e.g., sub.example.com) or subfolders. Below are the steps and code to make it work seamlessly.

1. Remove TW3 Packages:

npm uninstall laravel-vite-plugin tailwindcss postcss autoprefixer

Delete postcss.config.js if present.

2. Install TW4:

npm install @tailwindcss/vite

3. Configure Vite: Update vite.config.js to use @tailwindcss/vite, set base: './' for relative asset paths, and add a Blade hot-reload plugin.

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
    {
      name: 'blade-reload',
      handleHotUpdate({ file, server }) {
        if (file.endsWith('.blade.php') || file.endsWith('.php')) {
          server.ws.send({
            type: 'full-reload',
            path: '*',
          });
        }
      },
    },
  ],
  server: {
    hmr: true,
    host: 'localhost',
    port: 5173,
    watch: {
      usePolling: true,
    },
  },
  css: {
    postcss: null,
  },
  build: {
    outDir: 'public/build',
    assetsDir: 'assets',
    manifest: true,
    rollupOptions: {
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
    },
  },
  base: './',
});

4. Create ViteServiceProvider:

php artisan make:provider ViteServiceProvider

Define a custom @vite directive to load assets from public/build/.vite/manifest.json in production or Vite’s dev server in development.

please pay attention to the ***** below $viteBaseUrl  it shoul have the value of local host port 5173 prefixed by http - there is a filtering option active that prevents me from posting links in the post

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Facades\File;

class ViteServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Blade::directive('vite', function ($expression) {
            $entries = eval("return $expression;");
            if (!is_array($entries)) {
                $entries = [$entries];
            }

            if (app()->environment('local', 'development')) {
                $viteBaseUrl = ****** ;
                $html = "<script type=\"module\" src=\"{$viteBaseUrl}/@vite/client\"></script>\n";
                foreach ($entries as $entry) {
                    if (str_ends_with($entry, '.css')) {
                        $html .= "<link rel=\"stylesheet\" href=\"{$viteBaseUrl}/{$entry}\">\n";
                    } elseif (str_ends_with($entry, '.js')) {
                        $html .= "<script type=\"module\" src=\"{$viteBaseUrl}/{$entry}\"></script>\n";
                    }
                }
                return $html;
            }

            $manifestPath = public_path('build/.vite/manifest.json');
            if (!File::exists($manifestPath)) {
                return '';
            }

            $manifest = json_decode(File::get($manifestPath), true);
            if (!$manifest) {
                return '';
            }

            $html = '';
            foreach ($entries as $entry) {
                if (isset($manifest[$entry])) {
                    $asset = $manifest[$entry];
                    if (str_ends_with($entry, '.css')) {
                        $html .= "<link rel=\"stylesheet\" href=\"/build/{$asset['file']}\">\n";
                    } elseif (str_ends_with($entry, '.js')) {
                        $html .= "<script type=\"module\" src=\"/build/{$asset['file']}\"></script>\n";
                    }
                }
            }
            return $html;
        });
    }
}

5. Check if the new is registered in Register Provider: Add App\Providers\ViteServiceProvider::class to bootstrap/providers.php.
6. Check the @vite() directive in the template file

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

7.Set Up CSS with the new Tailwind 4 directive: In resources/css/app.css (remove the old tw3)

@import "tailwindcss";

8. Test dev don't forget to clear cache, clear config, clear view

php artisan cache:clear

php artisan config:clear

php artisan view:clear

composer run dev

9. Test production change the .env variable to production

APP_ENV=production

build production assets

npm run build

start the laravel server without vite server

php artisan serve

This setup eliminates PostCSS bloat, simplifies TW4 integration, and supports Blade templating with flexible asset paths. Hope this helps others facing the same issue!

I just follow the cli instructions and dont get involved with vite at all. Simple as...