Nuxt•3mo ago

How to disable default styles in nuxt

Nuxt has some default styles (like dark green background color) and idk how to remove it. I checked all directories and configs.

17 Replies

kapa.ai•3mo ago

Hi @suhaylmv. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt itself does not add strong default styles, but if you are using Nuxt UI (or Nuxt UI Pro), it applies some global styles, including background and text colors, via CSS variables and Tailwind CSS utilities. For example, Nuxt UI sets the background and text color on the <body> element using classes like bg-default and text-default, which are mapped to CSS variables such as --ui-bg and --ui-text:

body {
  @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
}

body {
  @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
}

These variables are set in your main CSS file, typically app/assets/css/main.css, and might look like this:

:root {
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}
.dark {
  --ui-bg: var(--ui-color-neutral-950);
  --ui-border: var(--ui-color-neutral-900);
}

:root {
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}
.dark {
  --ui-bg: var(--ui-color-neutral-950);
  --ui-border: var(--ui-color-neutral-900);
}

You can override or remove these styles by customizing or deleting these CSS variables and rules in your main.css. For example, to set a white background and black text:

:root {
  --ui-bg: white;
  --ui-text: black;
}
body {
  background: white !important;
  color: black !important;
}

:root {
  --ui-bg: white;
  --ui-text: black;
}
body {
  background: white !important;
  color: black !important;
}

If you want to completely remove Nuxt UI's default styles, you can also remove the @import "@nuxt/ui"; (or @nuxt/ui-pro) line from your CSS, but this will also remove all component styles. If you are not using Nuxt UI, check your global CSS files (like main.css) and the css property in your nuxt.config.ts for any imports that might be adding these styles. You can remove or override them as needed. For more details, see the Nuxt UI theming documentation and Nuxt styling guide. If you still see unexpected styles, ensure no other UI libraries or CSS frameworks are imported in your project that could be setting these defaults. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

suhaylmvOP•3mo ago

@kapa.ai I'm using nuxt ui, but I don't want it to apply styles by default. Is there an option in config for that?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the provided knowledge sources, there is no explicit config option in Nuxt UI to completely disable all default/global styles applied by the library. Nuxt UI applies global styles (such as background and text color) via CSS variables and Tailwind utilities, and these are imported through your main CSS file (e.g., @import "@nuxt/ui"; in app/assets/css/main.css) Nuxt UI Theme - Neutral. You can, however, customize or override these styles by editing your CSS variables or removing the @import "@nuxt/ui"; line from your CSS file. But according to the documentation, there is no config option like ui: { styles: false } or similar to disable all default styles via nuxt.config.ts Nuxt UI Installation Options. If you want to disable specific features (like fonts or color mode), there are config options for those:

export default defineNuxtConfig({
  ui: {
    fonts: false,
    colorMode: false
  }
})

export default defineNuxtConfig({
  ui: {
    fonts: false,
    colorMode: false
  }
})

But for global styles, you need to manually override or remove them in your CSS Nuxt UI Theme - Neutral. Summary:
There is no config option to disable all default Nuxt UI styles; you must override or remove them in your CSS. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

suhaylmvOP•3mo ago

@kapa.ai should I have tailwind module or npm package installed? how should my package.json look?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you are using Nuxt UI (or Nuxt UI Pro) in your Nuxt project, you do not need to install the Tailwind CSS module or npm package separately. The Nuxt UI module handles Tailwind CSS integration for you. The documentation states:

If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss in your project's root directory.
— Nuxt UI Installation

For most users (especially with npm or yarn), you only need to install @nuxt/ui (or @nuxt/ui-pro). Your package.json should look like this:

{
  "dependencies": {
    "@nuxt/ui": "^3.0.0"
  }
}

{
  "dependencies": {
    "@nuxt/ui": "^3.0.0"
  }
}

Or, if you are using Nuxt UI Pro:

{
  "dependencies": {
    "@nuxt/ui-pro": "^3.0.0"
  }
}

{
  "dependencies": {
    "@nuxt/ui-pro": "^3.0.0"
  }
}

You do not need to add tailwindcss to your dependencies unless you are using pnpm without shamefully-hoist=true. In that case, add it as follows:

{
  "dependencies": {
    "@nuxt/ui": "^3.0.0",
    "tailwindcss": "^4.0.0"
  }
}

{
  "dependencies": {
    "@nuxt/ui": "^3.0.0",
    "tailwindcss": "^4.0.0"
  }
}

Summary:
- Do not install the Tailwind CSS module or npm package unless you are using pnpm without shamefully-hoist=true. - Your package.json should only include @nuxt/ui or @nuxt/ui-pro as dependencies for Nuxt UI integration Nuxt UI Installation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

suhaylmvOP•3mo ago

@kapa.ai something is wrong my tailwind setup in my nuxt 4 project. Colors that I've set in tailwind config aren't being applied

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you are using Nuxt 4 with Nuxt UI, you should be aware that Tailwind CSS v4 is configured using CSS variables and the @theme directive in your CSS files, not via the old tailwind.config.js color settings. Nuxt UI expects you to define your custom colors and design tokens in your app/assets/css/main.css (or equivalent) using the @theme directive, like this:

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

@theme static {
  --color-brand: #123456;
  --color-accent: #abcdef;
  /* ...other custom colors */
}

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

@theme static {
  --color-brand: #123456;
  --color-accent: #abcdef;
  /* ...other custom colors */
}

If you try to set colors in tailwind.config.js as you did in previous Tailwind versions, those settings will not be picked up by Tailwind v4 or Nuxt UI. This is a breaking change in Tailwind v4 and Nuxt UI v3 Nuxt UI Theme. What to do: - Move your custom color definitions into your main CSS file using the @theme directive. - Make sure you are not relying on tailwind.config.js for color customization. - If you have recently upgraded to Nuxt 4, also ensure your project is using the new directory structure and that any third-party configs (like Tailwind) are updated accordingly Nuxt 4 Upgrade Guide. Summary:
Your custom colors must be defined in your CSS using the @theme directive, not in tailwind.config.js, for them to work with Nuxt 4 and Nuxt UI Nuxt UI Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

suhaylmvOP•3mo ago

@kapa.ai I'm getting "@source cannot be nested" error

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error "@source cannot be nested" occurs when you place the @source directive inside another directive (such as @theme) in your CSS. According to the Nuxt UI documentation, the @source directive should be placed at the top level of your CSS file, not inside @theme or any other block. Correct usage:

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

@source "../../../content";
/* or */
@source "../../content";

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

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

@source "../../../content";
/* or */
@source "../../content";

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

Incorrect usage (causes the error):

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

@theme static {
  @source "../../../content"; /* ❌ This will cause "@source cannot be nested" */
  /* your theme variables here */
}

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

@theme static {
  @source "../../../content"; /* ❌ This will cause "@source cannot be nested" */
  /* your theme variables here */
}

Make sure all your @source directives are at the root level of your CSS file, not inside any other directive or block Nuxt UI Theme - @source. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

suhaylmvOP•3mo ago

@kapa.ai I'm not doing that. My main.css is like this: @import "tailwindcss"; @import "@nuxt/ui" @theme static { --color-accent-500: #3D3BFF; --color-accent-300: #F0F0FF; }

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for sharing your main.css. Based on the knowledge sources, the correct usage for Nuxt UI and Tailwind v4 theming is to use the @import statements and the @theme directive as you have done. However, there are a couple of things to check: 1. Import Path:
The import for Nuxt UI should be @import "@nuxt/ui"; (or @import "@nuxt/ui-pro"; if you use Pro), not @import "/ui". The path /ui is not mentioned in the official documentation and may cause issues Nuxt UI Theme. 2. @source Directive:
If you are using Tailwind classes in markdown or other non-standard files, you may need to add the @source directive at the root level of your CSS file, not inside @theme. However, if you are not using it, you can omit it. Here is the recommended structure:

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

@theme static {
  --color-accent-500: #3D3BFF;
  --color-accent-300: #F0F0FF;
}

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

@theme static {
  --color-accent-500: #3D3BFF;
  --color-accent-300: #F0F0FF;
}

If you are still getting the "@source cannot be nested" error: - Double-check that you do not have any @source directive inside the @theme block or any other block. - Ensure all directives are at the root level, as shown above. If you are following this structure and still encounter the error, the knowledge sources do not provide further troubleshooting steps for this specific issue. In that case, please verify your Nuxt UI and Tailwind versions are up to date and that there are no typos or extra whitespace that could affect parsing Nuxt UI Theme. If you need to use the @source directive, it should look like this:

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

@source "../../../content";

@theme static {
  --color-accent-500: #3D3BFF;
  --color-accent-300: #F0F0FF;
}

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

@source "../../../content";

@theme static {
  --color-accent-500: #3D3BFF;
  --color-accent-300: #F0F0FF;
}

Summary:
- Use @import "@nuxt/ui"; instead of @import "/ui"; - Place all directives (@import, @source, @theme) at the root level, not nested. - The knowledge sources do not mention any other causes for the "@source cannot be nested" error. If the issue persists, it may be due to a misconfiguration outside the documented setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

How to disable default styles in nuxt

Did you find this page helpful?