Nuxt•17h ago

Tailwind styles not working after migrating to NuxtUI v3

I followed the official NuxtUI migration guide to v3 and changed the tailwindcss versions, but the tailwind classes have no styles at all. Here a relevant part of my nuxt.config

import tailwindcss from "@tailwindcss/vite"

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2025-04-20',
    devtools: { enabled: true },
    vite: {
        plugins: [
            tailwindcss(),
        ],
    },
    modules: [
      '@nuxt/ui',
      '@nuxtjs/color-mode',
      '@nuxt/icon',
      '@sidebase/nuxt-auth',
      '@pinia/nuxt',
      '@pinia-plugin-persistedstate/nuxt',
      '@nuxt/eslint',
      '@nuxtjs/i18n',
      '@compodium/nuxt'
    ],
    css: ['~/assets/css/main.scss'],
    build: {
        transpile: [
            '@vuepic/vue-datepicker',
            /echarts/,
            'vue-echarts',
            'resize-detector'
        ]
    },

import tailwindcss from "@tailwindcss/vite"

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2025-04-20',
    devtools: { enabled: true },
    vite: {
        plugins: [
            tailwindcss(),
        ],
    },
    modules: [
      '@nuxt/ui',
      '@nuxtjs/color-mode',
      '@nuxt/icon',
      '@sidebase/nuxt-auth',
      '@pinia/nuxt',
      '@pinia-plugin-persistedstate/nuxt',
      '@nuxt/eslint',
      '@nuxtjs/i18n',
      '@compodium/nuxt'
    ],
    css: ['~/assets/css/main.scss'],
    build: {
        transpile: [
            '@vuepic/vue-datepicker',
            /echarts/,
            'vue-echarts',
            'resize-detector'
        ]
    },

main.scss

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

...

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

...

9 Replies

kapa.ai•17h ago

Hi @Rohjans. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can see you're having issues with Tailwind CSS styles after migrating to Nuxt UI v3. Based on the knowledge sources, there are a few issues in your configuration that need to be addressed. Issues in Your Configuration 1. CSS Import Syntax: Your main.scss file has incorrect syntax for importing Tailwind CSS. 2. Missing @theme Directive: Nuxt UI v3 uses Tailwind CSS v4, which requires a CSS-first configuration approach with the @theme directive. 3. Missing @source Directive: You might need to explicitly specify source files for Tailwind's content detection. How to Fix 1. Update your CSS import syntax:

/* Change this: */
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

/* To this: */
@import "tailwindcss";
@import "@nuxt/ui";

/* Change this: */
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

/* To this: */
@import "tailwindcss";
@import "@nuxt/ui";

2. Add the @theme directive to your CSS file:

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

@theme static {
  /* Your theme variables here */
}

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

@theme static {
  /* Your theme variables here */
}

3. Add the @source directive if needed:

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

@source "../content"; /* Adjust path as needed */

@theme static {
  /* Your theme variables here */
}

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

@source "../content"; /* Adjust path as needed */

@theme static {
  /* Your theme variables here */
}

4. Wrap your app with the App component if you haven't already:

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

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

5. Check for Tailwind CSS version compatibility: Make sure you're using Tailwind CSS v4 which is required for Nuxt UI v3. If you're experiencing issues with DaisyUI or other Tailwind plugins, there might be compatibility issues as noted in a GitHub issue. According to the Nuxt UI migration guide, you should have run the Tailwind CSS upgrade tool:

npx @tailwindcss/upgrade

npx @tailwindcss/upgrade

If you're still experiencing issues, you might need to check if there are any conflicts with other modules or if your Tailwind CSS configuration is properly set up for v4. Let me know if you need more specific help with any of these steps! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17h ago

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

RohjansOP•17h ago

@kapa.ai Here are my package.json dependecies:

"devDependencies": {
        "@compodium/nuxt": "0.1.0-beta.9",
        "@iconify-json/heroicons": "^1.2.2",
        "@nuxt/devtools": "latest",
        "@nuxt/eslint": "^1.3.0",
        "@nuxt/icon": "^1.12.0",
        "@nuxt/ui": "^3.0.2",
        "@nuxtjs/color-mode": "^3.4.0",
        "@nuxtjs/eslint-config-typescript": "^12.1.0",
        "@nuxtjs/i18n": "9.5.3",
        "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
        "@pinia/nuxt": "^0.11.0",
        "@sidebase/nuxt-auth": "^0.10.0",
        "@tailwindcss/node": "^4.1.4",
        "@tailwindcss/postcss": "^4.1.4",
        "@tailwindcss/vite": "^4.1.4",
        "@types/bcrypt": "^5.0.2",
        "@types/bun": "^1.1.2",
        "@types/formidable": "^3.4.5",
        "@types/jsonwebtoken": "^9.0.6",
        "@types/node": "^22.14.1",
        "@types/pg": "^8.11.5",
        "eslint": "^9.4.0",
        "eslint-config-prettier": "^10.1.2",
        "eslint-plugin-prettier": "^5.2.6",
        "kysely-codegen": "^0.18.0",
        "nuxt": "3.16.2",
        "prettier": "^3.3.0",
        "sass": "^1.75.0",
        "typescript": "^5.4.5"
    },
    "dependencies": {
        "@langchain/community": "^0.3.0",
        "@langchain/core": "^0.3.0",
        "@langchain/openai": "^0.5.0",
        "@vuepic/vue-datepicker": "^11.0.2",
        "bcrypt": "^5.1.1",
        "echarts": "^5.5.0",
        "formidable": "^3.5.1",
        "h3-formidable": "^1.0.0",
        "jsonwebtoken": "^9.0.2",
        "kysely": "^0.28.0",
        "langchain": "^0.3.0",
        "pg": "^8.11.5",
        "pinia": "^3.0.2",
        "tailwindcss": "^4.1.4",
        "unhead": "^2.0.8",
        "vue-echarts": "^6.7.2",
        "vuedraggable": "^4.1.0",
        "zod": "^3.24.3"
    }

"devDependencies": {
        "@compodium/nuxt": "0.1.0-beta.9",
        "@iconify-json/heroicons": "^1.2.2",
        "@nuxt/devtools": "latest",
        "@nuxt/eslint": "^1.3.0",
        "@nuxt/icon": "^1.12.0",
        "@nuxt/ui": "^3.0.2",
        "@nuxtjs/color-mode": "^3.4.0",
        "@nuxtjs/eslint-config-typescript": "^12.1.0",
        "@nuxtjs/i18n": "9.5.3",
        "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
        "@pinia/nuxt": "^0.11.0",
        "@sidebase/nuxt-auth": "^0.10.0",
        "@tailwindcss/node": "^4.1.4",
        "@tailwindcss/postcss": "^4.1.4",
        "@tailwindcss/vite": "^4.1.4",
        "@types/bcrypt": "^5.0.2",
        "@types/bun": "^1.1.2",
        "@types/formidable": "^3.4.5",
        "@types/jsonwebtoken": "^9.0.6",
        "@types/node": "^22.14.1",
        "@types/pg": "^8.11.5",
        "eslint": "^9.4.0",
        "eslint-config-prettier": "^10.1.2",
        "eslint-plugin-prettier": "^5.2.6",
        "kysely-codegen": "^0.18.0",
        "nuxt": "3.16.2",
        "prettier": "^3.3.0",
        "sass": "^1.75.0",
        "typescript": "^5.4.5"
    },
    "dependencies": {
        "@langchain/community": "^0.3.0",
        "@langchain/core": "^0.3.0",
        "@langchain/openai": "^0.5.0",
        "@vuepic/vue-datepicker": "^11.0.2",
        "bcrypt": "^5.1.1",
        "echarts": "^5.5.0",
        "formidable": "^3.5.1",
        "h3-formidable": "^1.0.0",
        "jsonwebtoken": "^9.0.2",
        "kysely": "^0.28.0",
        "langchain": "^0.3.0",
        "pg": "^8.11.5",
        "pinia": "^3.0.2",
        "tailwindcss": "^4.1.4",
        "unhead": "^2.0.8",
        "vue-echarts": "^6.7.2",
        "vuedraggable": "^4.1.0",
        "zod": "^3.24.3"
    }

kapa.ai•17h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Looking at your package.json dependencies, I can see a few potential issues that might be causing your Tailwind CSS styles not to work after migrating to Nuxt UI v3. The main issue appears to be related to how Tailwind CSS v4 is configured in your project. Here are the key observations: 1. You have the correct versions of Tailwind CSS packages: - tailwindcss: ^4.1.4 - @tailwindcss/vite: ^4.1.4 - @tailwindcss/node: ^4.1.4 - @tailwindcss/postcss: ^4.1.4 2. You're using Nuxt UI v3.0.2, which is designed to work with Tailwind CSS v4. Based on the Nuxt UI migration guide, here are some additional steps you might need to take: 1. Remove your tailwind.config.ts file if you haven't already. Tailwind CSS v4 uses a CSS-first configuration approach. 2. Update your main.scss file to properly import Tailwind CSS:

   @import "tailwindcss";
   @import "@nuxt/ui";
   
   @theme static {
     /* Your theme variables here */
   }

   @import "tailwindcss";
   @import "@nuxt/ui";
   
   @theme static {
     /* Your theme variables here */
   }

3. Add the @source directive if you're using markdown files or other content that Tailwind might not automatically detect:

   @source "../content/**/*"; /* Adjust path as needed */

   @source "../content/**/*"; /* Adjust path as needed */

4. Check for compatibility issues with other modules. Some Tailwind plugins or UI libraries might not be fully compatible with Tailwind CSS v4 yet, as noted in a GitHub issue. 5. Make sure you've run the Tailwind CSS upgrade tool:

   npx @tailwindcss/upgrade

   npx @tailwindcss/upgrade

6. Verify that your nuxt.config.ts is correctly configured. You're using the Vite plugin correctly, but make sure you're not missing any other configuration. If you're still experiencing issues after these steps, it might be worth checking if there are any conflicts between Nuxt UI and other UI libraries or Tailwind plugins you might be using. Let me know if these suggestions help or if you need more specific guidance! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17h ago

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

RohjansOP•17h ago

@kapa.ai Running the upgrade tool now will only result in this error: ❯ npx @tailwindcss/upgrade (node:226220) ExperimentalWarning: CommonJS module /home/raul/.nvm/versions/node/v23.1.0/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /home/raul/.nvm/versions/node/v23.1.0/lib/node_modules/npm/node_modules/supports-color/index.js using require(). Support for loading ES Module in require() is an experimental feature and might change at any time (Use node --trace-warnings ... to show where the warning was created) ≈ tailwindcss v4.1.4 │ Tailwind CSS v4.1.4 found. The migration tool can only be run on v3 projects.

kapa.ai•17h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue now. The error message is quite clear - the Tailwind CSS upgrade tool (@tailwindcss/upgrade) is designed to help migrate from Tailwind CSS v3 to v4, but you already have Tailwind CSS v4.1.4 installed in your project. Since you've already installed Tailwind CSS v4, you don't need to run the upgrade tool. However, you still need to make sure your configuration follows the new CSS-first approach that Tailwind CSS v4 uses. Here's what you should do: 1. Update your main.scss file to properly use the new Tailwind CSS v4 syntax:

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

@theme static {
  /* Your theme variables here */
}

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

@theme static {
  /* Your theme variables here */
}

2. Remove any tailwind.config.js or tailwind.config.ts file if you still have one, as Tailwind CSS v4 uses CSS variables for configuration. 3. Make sure your app is wrapped with the UApp component as mentioned in the Nuxt UI migration guide:

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

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

4. Check for any conflicts with other UI libraries or Tailwind plugins you might be using. If you're still experiencing issues after these steps, it might be worth checking if there are any specific compatibility issues between Tailwind CSS v4 and some of your other dependencies. The GitHub issue about DaisyUI compatibility suggests that there might be some issues with certain Tailwind plugins in Nuxt 3 Layers architecture. Let me know if these suggestions help or if you need more specific guidance! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17h ago

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

johntanzer•12h ago

Add shamefully hoist in .npmrc And run pnpm install

Gaming

Programming

Tailwind styles not working after migrating to NuxtUI v3

Did you find this page helpful?