wire-elements
Tailwind V4 removed the safelist css
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 */
Didnt work for me!
Ensure that TailwindCSS is up to date. I had the same issue and was wildly out of date!
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.
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.
https://github.com/tailwindlabs/tailwindcss/pull/17147#issuecomment-2772090696 is where I found the solution to this issue.
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!
Sorry, I am unsure what else it could be. You have restarted the commands after updating yes?
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!
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(),
],
});