Nuxt•7d ago

How to use Tailwind with Nuxt UI v2.20

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?

13 Replies

kapa.ai•7d ago

Hi @Pablo. 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";

@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";

@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*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]

"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>

<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: ----------------------

kapa.ai•7d ago

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

PabloOP•7d ago

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

Omnislash•6d ago

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 ?

PabloOP•6d ago

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

Omnislash•6d ago

Do you have a reproduction somewhere?

PabloOP•6d ago

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

Pablo Settecase

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

PabloOP•6d ago

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

Corentin_dev•6d ago

try run you app with host=0.0.0.0 npm run dev or try adding

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

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

` to your nuxt.config.ts

PabloOP•6d ago

in my stackblitz example, and in my project, i get the same error 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.

Omnislash•5d ago

@Pablo 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 ?

PabloOP•5d ago

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!

Omnislash•5d ago

yeah the UI 3 is pretty nice and stable, you should stick to it and feel free to ask any question about it 🙂

Gaming

Programming

How to use Tailwind with Nuxt UI v2.20

Did you find this page helpful?