From gdu
Tailwind CSS v4 + Nuxt UI v4 semantic design system. Activates on .vue and .css files to enforce semantic tokens, CSS variables, Tailwind Variants, and automatic dark mode. Use when styling components to ensure design system compliance and dark mode support.
How this skill is triggered — by the user, by Claude, or both
Slash command
/gdu:tailwindThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Nuxt UI v4 provides a complete semantic layer on top of Tailwind CSS v4. Use it.
Nuxt UI v4 provides a complete semantic layer on top of Tailwind CSS v4. Use it.
| Category | Use | Never |
|---|---|---|
| Colors | text-primary, bg-error, text-warning | text-blue-500, bg-red-600 |
| Text | text-dimmed, text-muted, text-toned, text-default, text-highlighted | text-gray-400, text-neutral-500 |
| Background | bg-default, bg-muted, bg-elevated, bg-accented, bg-inverted | bg-white, bg-gray-50 |
| Border | border-default, border-muted, border-accented, border-inverted | border-gray-200 |
| Radius | rounded-sm through rounded-3xl (driven by --ui-radius) | rounded-[12px] |
--ui-*)In Tailwind v4, the primary source of tokens is app/assets/css/main.css using the @theme directive. tailwind.config.ts is only maintained as a fallback for v3 compatibility:
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-sans: 'Public Sans', sans-serif;
}
Customize shades per mode in :root / .dark:
:root { --ui-primary: var(--ui-color-primary-500); }
.dark { --ui-primary: var(--ui-color-primary-400); }
Dark mode is automatic via CSS variables. Nuxt UI components handle light/dark internally.
bg-default text-default) — dark mode comes freedark: variants for non-Nuxt-UI elements with hardcoded valuesNuxt UI uses Tailwind Variants with slots, variants, and compoundVariants.
ui prop overrides slots: <UCard :ui="{ body: 'p-8' }" />app.config.ts under ui.{component} keyclass prop: overrides root/base slot onlyMobile-first: class then sm: md: lg:. No arbitrary values (w-[347px]).
When CELLM_DEV_MODE: true: after styling implementation, write feedback entry to dev-cellm-feedback/entries/tailwind-{date}-{seq}.md. Note which semantic tokens were missing, whether Tailwind v4 conventions were followed, and which hardcoded values leaked through. Format and lifecycle: see dev-cellm-feedback/README.md.
blue-500, #hex, rgb()--ui-*tailwind.config.ts as primary source — Tailwind v4 uses @theme in app/assets/css/main.css as the primary source of tokens. tailwind.config.ts is just a fallback for v3.w-[347px], p-[13px]npx claudepluginhub murillodutt/cellm --plugin gduBuild styled UIs with @nuxt/ui v4 components including forms with Zod/Valibot validation, data tables with sorting, and modals/overlays. Also covers Tailwind Variants theming.
Guides designing and maintaining Tailwind CSS design systems including token mapping, theme extension, component variants, dark mode, and responsive utilities. Useful for front-end developers managing design system consistency.
Tailwind CSS v4 utility-first discipline: CSS-first configuration, design tokens via @theme, and principled class composition. Invoke whenever task involves any interaction with Tailwind CSS — writing, reviewing, refactoring, debugging, or understanding utility classes, theme configuration, custom utilities, dark mode, or Tailwind integration with frameworks.