Tailwind v4 not working with nuxt 4.2.0
Hi, Tailwind v4 isn't working with nuxt.
I tried the steps in the official tailwind documentation
https://tailwindcss.com/docs/installation/framework-guides/nuxt but it didn't work
I also tried using postcss, it threw an error an told me to install tailwindcss/postcss, which I did but that also didn't work
Is there another way to install tailwind? A module that I'm missing or a version missmatch?
This is my pack-lock.json:
"packages": {
"": {
"name": "frontend",
"hasInstallScript": true,
"dependencies": {
"@lucide/lab": "^0.1.2",
"@nuxt/eslint": "^1.10.0",
"@nuxt/test-utils": "^3.20.1",
"@pinia/nuxt": "^0.11.2",
"@tailwindcss/vite": "^4.1.16",
"@vueuse/core": "^14.0.0",
"date-fns": "^4.1.0",
"eslint": "^9.38.0",
"firebase": "^12.5.0",
"lucide-vue-next": "^0.552.0",
"nuxt": "^4.2.0",
"pinia": "^3.0.3",
"tailwindcss": "^4.1.16",
"typescript": "^5.9.3",
"vue": "^3.5.22",
"vue-router": "^4.6.3"
}
},
app/assets/css/main.css:
@import "tailwindcss";
I get no errors, tailwind just doesn't work.
I tried the steps in the official tailwind documentation
https://tailwindcss.com/docs/installation/framework-guides/nuxt but it didn't work
I also tried using postcss, it threw an error an told me to install tailwindcss/postcss, which I did but that also didn't work
Is there another way to install tailwind? A module that I'm missing or a version missmatch?
This is my pack-lock.json:
"packages": {
"": {
"name": "frontend",
"hasInstallScript": true,
"dependencies": {
"@lucide/lab": "^0.1.2",
"@nuxt/eslint": "^1.10.0",
"@nuxt/test-utils": "^3.20.1",
"@pinia/nuxt": "^0.11.2",
"@tailwindcss/vite": "^4.1.16",
"@vueuse/core": "^14.0.0",
"date-fns": "^4.1.0",
"eslint": "^9.38.0",
"firebase": "^12.5.0",
"lucide-vue-next": "^0.552.0",
"nuxt": "^4.2.0",
"pinia": "^3.0.3",
"tailwindcss": "^4.1.16",
"typescript": "^5.9.3",
"vue": "^3.5.22",
"vue-router": "^4.6.3"
}
},
app/assets/css/main.css:
@import "tailwindcss";
I get no errors, tailwind just doesn't work.
Setting up Tailwind CSS in a Nuxt project.
