#Extend tailwind safelist with more color utilities

44 messages · Page 1 of 1 (latest)

warm sable
#

Hi, I am using Nuxt UI and am programmatically creating css color utilities. Most of these Nuxt UI already safelists for tailwind css, such as bg-${color}. However I am looking for a way to add additional utilities. Specifically I want to add fill-${color}. Is there a way I can generate these for the colors defined by Nuxt UI? Ones like primary, error etc. but also the ones that are added through the config file?

Any help would be greatly appreciated.

dusty templeBOT
#

Hi @warm sable. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The knowledge sources don’t mention any API or option in Nuxt UI to extend Tailwind’s safelist or to auto‑generate extra utilities like fill-{color} for the semantic colors (including custom ones from config). Because of that, I can’t confirm a Nuxt‑UI‑specific way to do exactly what you’re asking.

What is documented is:

  • Nuxt UI defines semantic color aliases (primary, secondary, success, info, warning, error, neutral) and lets you extend that list via ui.theme.colors in nuxt.config.ts / vite.config.ts. [Design system; Extend colors]
  • Those aliases are then mapped to actual Tailwind colors via ui.colors in app.config.ts / vite.config.ts. [Design system; Extend colors]
  • Nuxt UI provides utility classes like text-primary, bg-success, etc., backed by CSS variables, but the docs don’t describe how the safelist for these is generated or how to extend it. [CSS variables; Releases]

There is no explicit documentation about:

  • A Nuxt UI option like ui.safelist or similar.
  • A hook that exposes the resolved semantic color list so you can programmatically build a Tailwind safelist (e.g. fill-primary, fill-error, including extended colors).

Given these limits, the docs don’t provide a supported, documented way to:

  1. Read Nuxt UI’s semantic color list at build time, and
  2. Use it to auto‑generate additional Tailwind utilities such as fill-{color}.
#

You would need to rely on standard Tailwind configuration (e.g. safelist in tailwind.config) and your own logic to mirror the same color names, but that is outside what’s covered in the Nuxt UI docs we have.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

warm sable
#

@dusty temple I've looked at Nuxt UI's source code and I do indeedsee no explicit mention of safelists in the code. I think the classes are added at runtime? Not sure how or where this is done however.

dusty templeBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The knowledge sources don’t explain how Nuxt UI injects or “safelists” its utility classes internally, nor do they describe any runtime mechanism for adding Tailwind classes.

What they do say is:

  • Nuxt UI is “CSS‑first”: colors, fonts, etc. are defined via Tailwind’s @theme in CSS, and semantic colors (primary, error, etc.) are mapped via ui.colors in app.config.ts / nuxt.config.ts / vite.config.ts.[Design system; Design system colors]
  • Those semantic colors are then exposed as utilities like text-primary, bg-error, etc., backed by CSS variables.[CSS variables; Releases]

However, there is no documentation in these sources about:

  • Any safelist configuration inside Nuxt UI.
  • Any runtime generation of Tailwind classes.
  • Any hook or API to extend whatever mechanism Nuxt UI uses.

So from the docs we have, it’s not possible to say where or how Nuxt UI “adds” those classes (whether via Tailwind config, a plugin, or pure CSS variables), and there’s no documented way to tap into that to generate additional utilities like fill-{color}.

If you need fill-primary, fill-error, etc., the only approach that’s clearly supported by the docs is to define them yourself via CSS variables / classes in your own CSS (using the same semantic color variables), but the exact implementation details of Nuxt UI’s internal class generation are not described in the available sources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

stuck canopy
#

Looks like Kapa answered for tailwind v3 with the .config

#

If you want to generate strings, you have indeed to safe/source them in tailwind so it's pregenerated I reckon

#

here is an exemple from mine, directly in the css file :

@import 'tailwindcss';
@import '@nuxt/ui';

@source inline("{top,bottom}-{0..10}/10");
#

it should solve it

warm sable
stuck canopy
warm sable
#

With some help from Claude I managed to make a vite plugin that generates the color utilities for fill- and stroke-, but it does not work for bg-.../30. Hence I am very curious how Nuxt UI does it

#

I've searched through their source code but I cant point down exactly what handles this

stuck canopy
warm sable
#

yes but I create the classes programmatically, like bg-${color}/10

stuck canopy
#

ah ok I see !

warm sable
#

Nuxt UI also does this in their theme files, and they get css for it while I don't

#

@stuck canopy I dont know if benjamin is on this discord and I am allowed to ping him?

stuck canopy
#

@bleak rune might know more too

#

(if he's avai ofc ^^)

warm sable
#

I think @gusty shell would be his @?

#

I'd appreciate some details into how the css generation works for programatically generated classes such as bg-error/10, and how they are generated only when used (at least that is what it looks like)

gusty shell
#

Hello 👋 You want to safelist specific colors with opacity modifiers is that right? Using @source inline?

warm sable
#

Similar to Nuxt UI I have theme files which creates classes for components, but unlike Nuxt UI utilities like ‘bg-error/30’ and ‘fill-secondary’ (programmatically generated by iterating the colours) don’t have css generated for it

gusty shell
warm sable
gusty shell
#

not sure to quite understand your setup but you can add a @source into your main.css that links to your generated theme

warm sable
warm sable
strange hollow
#

@dusty temple tell the OP about how to extend tailwind configuration in nuxt.config.ts or creating a tailwind.config.ts and then plugging it into nuxt. That will solve their problem.

dusty templeBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Nuxt’s docs do describe how Tailwind is wired in, but they don’t show any Nuxt‑specific API for extending Tailwind’s safelist or generating fill-* utilities automatically from Nuxt UI’s semantic colors. So I can only outline what’s documented.

1. Where Tailwind is configured in Nuxt

Nuxt 3/4 uses nuxt.config.ts as the single source of truth and does not read a separate vite.config.ts / postcss.config.js / nitro.config.ts, but it does allow a separate tailwind.config.js file for Tailwind itself. [External config 3.x; External config 4.x]

From the table:

TailwindCSS – tailwind.config.js – More info: tailwindcss.nuxtjs.org [External config 3.x; External config 4.x]

So:

  • You keep using nuxt.config.ts for Nuxt and Nuxt UI options.
  • You configure Tailwind in a standard tailwind.config.(js|ts) file (including safelist).

2. How Nuxt UI brings Tailwind in

For Nuxt UI, the documented setup is: [Nuxt UI install]

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

Nuxt UI then layers its design system on top of Tailwind (semantic colors, CSS variables, etc.). [Design system; CSS variables]

#

3. Where to extend Tailwind (e.g. safelist, fill-*)

The docs don’t show a tailwind key in nuxt.config.ts, and they explicitly say Tailwind is configured via tailwind.config.js. [External config 3.x; External config 4.x]

So to solve the OP’s problem (safelisting fill-* utilities), the documented path is:

  1. Create a Tailwind config at the project root:

    // tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{vue,js,ts}',
    './components/**/*.{vue,js,ts}',
    './pages/**/*.{vue,js,ts}',
    './layouts/**/*.{vue,js,ts}',
    './plugins/**/*.{js,ts}',
    './error.{vue,js,ts}',
  ],
  safelist: [
    // your extra utilities, e.g.:
    'fill-primary',
    'fill-secondary',
    'fill-success',
    'fill-info',
    'fill-warning',
    'fill-error',
    'fill-neutral',
  ],
}

    (The exact content globs aren’t in the provided docs, so treat them as an example pattern, not something explicitly documented.)

  2. Use Nuxt UI’s semantic colors as usual via app.config.ts / ui.colors and ui.theme.colors in nuxt.config.ts if you extend the list (e.g. add tertiary). [Design system colors; Extend colors]

# 
   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ['@nuxt/ui'],
     css: ['~/assets/css/main.css'],
     ui: {
       theme: {
         colors: [
           'primary',
           'secondary',
           'tertiary',
           'info',
           'success',
           'warning',
           'error',
           'neutral'
         ]
       }
     }
   })

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      secondary: 'purple',
      tertiary: 'indigo',
      neutral: 'zinc'
    }
  }
})
  1. Mirror any extra semantic colors in your Tailwind safelist (e.g. fill-tertiary) manually. The docs don’t show a way to auto‑generate this list from Nuxt UI’s config, so that part would be your own build‑time logic.

So: based on the docs, the way to “extend Tailwind configuration” for this use case is to use a standard tailwind.config.js with a safelist, alongside your nuxt.config.ts + Nuxt UI setup. There’s no documented Nuxt‑specific hook to generate those fill-* classes automatically from Nuxt UI’s color aliases.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

strange hollow
#

oh it is solved...