How to use Tailwind with Nuxt UI v2.20

[glossy wraith]

I have this weird issue where I cannot use Tailwind classes in some places, but in others I can. Many elements in my app are UCards and within it I use many tailwind classes to control widths and colors just fine. But, in other places, such as a simple About page with only <divs> (which lives within a UContainer), Tailwind classes do not seem to apply.

Do I need to install Tailwind in addition to Nuxt UI in order to use it outside of those UI components like UCard?

[royal bane]

Hi @glossy wraith. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources, it appears you're experiencing an issue with Tailwind CSS classes not applying consistently across your Nuxt application with Nuxt UI v2.20.

When using Nuxt UI, Tailwind CSS is included as a dependency, so you don't need to install it separately. However, there are a few things to check to ensure Tailwind classes work properly throughout your application:

1. CSS Import Order: Make sure you're importing Tailwind CSS and Nuxt UI in the correct order in your CSS file:

@import "tailwindcss";
@import "@nuxt/ui";

2. Content Detection: Tailwind CSS needs to know which files to scan for classes. If you're using Tailwind classes in files that aren't automatically detected, you might need to use the @source directive in your CSS file:

@import "tailwindcss";
@import "@nuxt/ui";

@source "../../../content";
/* Use this if you're not using compatibilityVersion: 4 */
@source "../../content";

3. VSCode Configuration: For better development experience, install the Tailwind CSS IntelliSense extension and add these settings to your .vscode/settings.json:

"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
},
"tailwindCSS.classAttributes": ["class", "ui"],
"tailwindCSS.experimental.classRegex": [
  ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]

4. App Wrapper: Ensure your app is wrapped with the UApp component, which provides global configurations:

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

One interesting issue found in the knowledge sources is related to font types affecting Tailwind classes. As mentioned in a Stack Overflow post, someone had a similar issue where changing the font type resolved their problem with element positioning Stack Overflow Post.

If you're using PNPM as your package manager, make sure you either set shamefully-hoist=true in your .npmrc file or install tailwindcss in your project's root directory as mentioned in the Installation guide.

If these steps don't resolve your issue, you might want to check if there are any CSS conflicts or if you're using any CSS purging tools like nuxt-purgecss which might be removing some Tailwind classes.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@glossy wraith Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[glossy wraith]

how do i add a main.css file to my nuxt 3 application?

[blissful sedge]

Hello,
You have to put his name again to make it answer more 🙂
You just add your css in assets/css/main.css, then in your nuxt.congif you add css: ['~/assets/css/main.css]
But I don't think it's your issue here, do you have a precise exemple of one that's not working ?

[glossy wraith]

If I add a main.css file I get a 500 Vite error "[vite-node] [plugincss] [CssSyntaxError] ./node_modules/tailwindcss/lib/index.js:1:0 : Unknown word "use strict""

[blissful sedge]

Do you have a reproduction somewhere?

[glossy wraith]

https://stackblitz.com/edit/github-taa18bca?file=package.json

that's the nuxt ui starter with the @nuxt/ui package downgraded to 2.20.0

[tidal cypress]

try run you app with host=0.0.0.0 npm run dev

or try adding

    host: '0.0.0.0',
    port: 3000,
  },

to your nuxt.config.ts

[glossy wraith]

in my stackblitz example, and in my project, i get the same error

[glossy wraith]

If I upgrade to Nuxt UI v3 and follow the installation instructions then I can finally use the Tailwind classes as expected. However, I was not able to get this to work with Nuxt UI V2.

[blissful sedge]

@glossy wraith I don't think tailwind v4 and nuxt UI v2 are compatible

did you install nuxt ui 3 ? it might not be enough
You should either instart nuxt ui 2 to have the proper dependecies versions, or try to downgrade tailwind too to see if it helps

is there a reason you use v2 instead of v3 ?

[glossy wraith]

was using tailwind v3 classes with nuxt ui v2 but that wasn't working. earlier I upgraded to nuxt ui v3 and things are working as expected

I appreciate your help!