Tailwind and Nuxt

[JP-juniorr]

Im trying since yesterday just to start a new page using tailwind and nuxt.
I went to their website and exactly done the same instructions but no matter what i do i got the same error over and over that seems impossible to solve 500 cant find module assets/cas/main.css and it is there
Ive tried 5 projects the same.
Chatgpt even can’t seems to figure it out as well.

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[JP-juniorr]

https://github.com/JP-juniorr/tailwind

[wongjn]

As per the nuxt documentation, @ is an alias srcDir. Now, if we look further in the documentation, we see that srcDir is app. Thus, the CSS path in nuxt.config.ts, @/assets/css/main.css is equivalent to app/assets/css/main.css. This is incorrect, hence the error message.

If we look back at the alias documentation again, we can see that we can use ~~ or @@ as alias to the root. Thus, we should change our config to:

 export default defineNuxtConfig({
   compatibilityDate: "2024-11-01",
   devtools: { enabled: true },
-  css: ['@/assets/css/main.css'],
+  css: ['@@/assets/css/main.css'],
   vite: {
     plugins: [
       tailwindcss(),

Or

 export default defineNuxtConfig({
   compatibilityDate: "2024-11-01",
   devtools: { enabled: true },
-  css: ['@/assets/css/main.css'],
+  css: ['~~/assets/css/main.css'],
   vite: {
     plugins: [
       tailwindcss(),

@@/assets/css/main.css or ~~/assets/css/main.css would be equivalent to <project-root>/assets/css/main.css which is the correct path.

---

As an aside, your main.css is incorrect for integrating Tailwind v4. It should be:

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

[JP-juniorr]

APPRECIATED!!!!!!!!!!
Thanks it worked