Nuxt•6d ago

[NuxtUI] Confused about 3.0.2 design system

Reading through the docs, it seems like I should be able to use classes like text-primary, text-secondary, bg-muted, bg-elevated, bg-accented, etc. out of the box, however that doesn't appear to be the case. Am I supposed to copy/paste the contents of the @theme default { ... } blocks from the Theme docs page into my main.css file for this to work? Thanks!

7 Replies

kapa.ai•6d ago

Hi @jovrtn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're right to be confused about how the Nuxt UI design system works with Tailwind CSS v4. Let me clarify this for you. In Nuxt UI, you can use CSS variables like --ui-primary, --ui-bg-elevated, etc. in your Tailwind CSS classes in two ways: 1. Using CSS variable syntax: text-(--ui-primary) or bg-(--ui-bg-elevated) 2. Using color alias: text-primary or bg-primary However, for the neutral palette tokens like bg-muted, bg-elevated, bg-accented, etc., you need to use the CSS variable syntax approach (e.g., bg-(--ui-bg-elevated)). The reason is that Nuxt UI automatically creates CSS variables for each color alias you define, but for the neutral palette tokens, you need to reference them using the CSS variable syntax. Nuxt UI provides a comprehensive set of design tokens for the neutral palette, including: - Text tokens: --ui-text-dimmed, --ui-text-muted, --ui-text-toned, --ui-text, --ui-text-highlighted - Background tokens: --ui-bg, --ui-bg-muted, --ui-bg-elevated, --ui-bg-accented, --ui-bg-inverted - Border tokens: --ui-border, --ui-border-muted, --ui-border-accented, --ui-border-inverted You don't need to copy/paste the entire @theme blocks from the docs into your main.css file. Instead, you can customize specific variables as needed:

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

: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);
}

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

: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);
}

This approach allows you to override only the specific variables you want to customize while keeping the rest at their default values. Getting Started: Theme Tokens provides more details on how these tokens work, and Neutral Palette shows the complete set of neutral palette tokens available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

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