Nuxt•4mo ago

Text colors in theme

The css classes text-primary or text-dimmed are not defined in my project. but it works with the CSS variables text-(--ui-primary) and text-(--ui-text-dimmed). Where are the css classes?

5 Replies

kapa.ai•4mo ago

Hi @mabuse9922. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The CSS classes like text-primary and text-dimmed are not standard Tailwind CSS classes, but are provided by Nuxt UI through its theming system. These classes are generated based on the design tokens and CSS variables defined in your theme configuration. Nuxt UI uses Tailwind CSS's @theme directive to define custom design tokens (such as --ui-primary, --ui-text-dimmed, etc.), and then creates utility classes like text-primary, text-dimmed, bg-default, etc., that map to these variables. This means you can use these classes in your templates, and they will apply the correct color values according to your theme and color mode (light/dark) settings. For example, the documentation shows:

:root {
  --ui-primary: var(--ui-color-primary-500);
  /* ... */
}
.dark {
  --ui-primary: var(--ui-color-primary-400);
  /* ... */
}

:root {
  --ui-primary: var(--ui-color-primary-500);
  /* ... */
}
.dark {
  --ui-primary: var(--ui-color-primary-400);
  /* ... */
}

And then you can use:

<span class="text-primary">Primary</span>
<span class="text-dimmed">Dimmed</span>

<span class="text-primary">Primary</span>
<span class="text-dimmed">Dimmed</span>

These classes are available because Nuxt UI extends Tailwind with its own set of utilities, which are generated from your theme's CSS variables. If you are not seeing these classes in your compiled CSS, make sure you have imported Nuxt UI's CSS in your main stylesheet:

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

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

If you use the CSS variable directly (e.g., text-[--ui-primary]), that's the underlying value the class would apply, but Nuxt UI provides the convenience classes for you automatically when set up correctly Getting-started > CSS Variables Getting-started > Neutral. If the classes are still missing, double-check that Nuxt UI is properly installed and configured in your project, and that your Tailwind setup is not purging these classes unintentionally. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

mabuse9922OP•4mo ago

@kapa.ai where in the nuxt-ui-project are the classes like 'text-primary' defined?

HugoRCD•4mo ago

@mabuse9922 Which version of @nuxt/ui do you use?

mabuse9922OP•4mo ago

I use nuxt-pro 3.0.2 @HugoRCD Yes, that was the right question. It works with new newest version 3.1.2

Gaming

Programming

Text colors in theme

Did you find this page helpful?