Tailwind V4 removed the safelist css

[magarrent]

Use this in your app.css instead:

@import 'tailwindcss';

@source inline("{sm:,md:,lg:,xl:,2xl:,}max-w-{sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}"); /* Add this */

[hipoagencia]

Didnt work for me!

[CeeBeeSco]

Didnt work for me!

Ensure that TailwindCSS is up to date. I had the same issue and was wildly out of date!

[AlnThea]

Didnt work for me!

update the tailwindcss version to 4.1 and up

[CeeBeeSco]

Didnt work for me!

update the tailwindcss version to 4.1 and up

What errors are you getting? Another thing I found was if Vite was out of date too.

[hipoagencia]

No errors! Just updated both (Vite and Tailwind)

[hipoagencia]

Actually, theres an error in npm

[hipoagencia]

[CeeBeeSco]

So this is the exact same issue I had and ensuring that Vite and Tailwind were up to date it started working.

VITE v6.3.5. with Tailwind 4.1.12

Triple check what versions you are running.

tailwindlabs/tailwindcss#17147 (comment) is where I found the solution to this issue.

[hipoagencia]

So this is the exact same issue I had and ensuring that Vite and Tailwind were up to date it started working.

VITE v6.3.5. with Tailwind 4.1.12

Triple check what versions you are running.

tailwindlabs/tailwindcss#17147 (comment) is where I found the solution to this issue.

Tailwind version: 4.1.12
Vite vite/6.3.5 win32-x64
node-v21.7.1

Any suggestion? By the way, thanks for your time!

[CeeBeeSco]

Sorry, I am unsure what else it could be. You have restarted the commands after updating yes?

[hipoagencia]

Sorry, I am unsure what else it could be. You have restarted the commands after updating yes?

Yes, i did.. i'm going to keep trying here. But thanks anyway!

[AlnThea]

Sorry, I am unsure what else it could be. You have restarted the commands after updating yes?

Yes, i did.. i'm going to keep trying here. But thanks anyway!

im using it like this, and its work for me,

last try delete folder node_module and package-lock.json and folder vendor,
after that composer install and npm install

"dependencies": {
 "devDependencies": {
        "@tailwindcss/forms": "^0.5.7",
        "@tailwindcss/postcss": "^4.0.15",
        "@tailwindcss/typography": "^0.5.10",
        "axios": "^1.7.4",
        "chart.js": "^4.4.7",
        "chartjs-plugin-annotation": "^3.1.0",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.2.0",
        "postcss": "^8.4.32",
        "tailwindcss": "^4.1.5",
        "vite": "^6.0.11"
    },
    "dependencies": {
        "@tailwindcss/vite": "^4.0.3",
        "dom-to-image": "^2.6.0",
        "puppeteer": "^24.4.0"
    }

and here the safelist

@import 'tailwindcss';
@source inline("{sm:,md:,lg:,xl:,2xl:,}max-w-{sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}");

@source inline("{bg-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-{100,200,300,600}}");
@source inline("{hover:bg-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-600}");
@source inline("{dark:bg-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-600}");
@source inline("{border-{yellow-300,red-600,yellow-600,green-600,blue-600,indigo-600,lime-600,teal-600,pink-600,rose-600,fuchsia-600,purple-600,violet-600,sky-600,emerald-600,amber-600,orange-600,slate-600}}");
@source inline("{border-l-{red-600,yellow-600,green-600,blue-600,indigo-600,lime-600,teal-600,pink-600,rose-600,fuchsia-600,purple-600,violet-600,sky-600,emerald-600,amber-600,orange-600,slate-600}}");
@source inline("{text-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-{100,500}}");
@source inline("{hover:text-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-100}");

@source "../views";

and here vite config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

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

[silasrm]

Sorry, I am unsure what else it could be. You have restarted the commands after updating yes?

Yes, i did.. i'm going to keep trying here. But thanks anyway!

im using it like this, and its work for me,

last try delete folder node_module and package-lock.json and folder vendor, after that composer install and npm install

"dependencies": {
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/postcss": "^4.0.15",
"@tailwindcss/typography": "^0.5.10",
"axios": "^1.7.4",
"chart.js": "^4.4.7",
"chartjs-plugin-annotation": "^3.1.0",
"concurrently": "^9.0.1",
"laravel-vite-plugin": "^1.2.0",
"postcss": "^8.4.32",
"tailwindcss": "^4.1.5",
"vite": "^6.0.11"
},
"dependencies": {
"@tailwindcss/vite": "^4.0.3",
"dom-to-image": "^2.6.0",
"puppeteer": "^24.4.0"
}

and here the safelist

@import 'tailwindcss';
@source inline("{sm:,md:,lg:,xl:,2xl:,}max-w-{sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}");

@source inline("{bg-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-{100,200,300,600}}");
@source inline("{hover:bg-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-600}");
@source inline("{dark:bg-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-600}");
@source inline("{border-{yellow-300,red-600,yellow-600,green-600,blue-600,indigo-600,lime-600,teal-600,pink-600,rose-600,fuchsia-600,purple-600,violet-600,sky-600,emerald-600,amber-600,orange-600,slate-600}}");
@source inline("{border-l-{red-600,yellow-600,green-600,blue-600,indigo-600,lime-600,teal-600,pink-600,rose-600,fuchsia-600,purple-600,violet-600,sky-600,emerald-600,amber-600,orange-600,slate-600}}");
@source inline("{text-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-{100,500}}");
@source inline("{hover:text-{red,yellow,green,blue,indigo,lime,teal,pink,rose,fuchsia,purple,violet,sky,emerald,amber,orange,slate}-100}");

@source "../views";

and here vite config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

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

Thks! :D