Tailwind CSS
Version
This project uses Tailwind CSS v4 with the Vite plugin (@tailwindcss/vite). Configuration is CSS-first, NOT via tailwind.config.mjs.
Theme Configuration
All design tokens are defined in src/styles/global.css using the @theme directive:
@import "tailwindcss";
@theme {
--color-brand-blue: #003087;
--color-brand-yellow: #FFD100;
--color-primary: var(--color-brand-blue);
--color-primary-foreground: #ffffff;
--color-accent: var(--color-brand-yellow);
--color-accent-foreground: #003087;
--color-surface: #ffffff;
--color-surface-foreground: #1f2937;
--color-muted: #f1f5f9;
--color-muted-foreground: #64748b;
--color-destructive: #dc2626;
--color-destructive-foreground: #ffffff;
--color-success: #16a34a;
--color-success-foreground: #ffffff;
}
Design Token Usage
| Token |
Utility Class |
Use For |
brand-blue |
bg-brand-blue, text-brand-blue |
Header, primary headings |
brand-yellow |
bg-brand-yellow, text-brand-yellow |
CTAs, accent highlights |
primary |
bg-primary, text-primary |
Primary UI elements |
accent |
bg-accent, text-accent |
Secondary actions, highlights |
surface |
bg-surface, text-surface-foreground |
Card backgrounds, main content |
muted |
bg-muted, text-muted-foreground |
Subtle backgrounds, secondary text |
destructive |
bg-destructive |
Error states |
success |
bg-success |
Success states, valid results |
Custom Utilities
@utility focus-ring {
outline: none;
@apply ring-2 ring-offset-2 ring-primary;
}
Use focus-ring on all focusable interactive elements for consistent focus styling.
Rules
- Utility-first: Apply classes directly in
className / class.
- No
@apply in components: Use utility classes. Reserve @apply for global.css custom utilities only.
- Responsive: Mobile-first. Use
sm:, md:, lg: breakpoints.
- No dark mode: The project does not use dark mode.
- No
tailwind.config.mjs for new tokens: Add all new tokens to global.css @theme block.
Class Order Convention
Follow this order for readability:
- Layout (
flex, grid, block)
- Positioning (
relative, absolute, z-*)
- Spacing (
p-*, m-*, gap-*)
- Sizing (
w-*, h-*, max-w-*)
- Typography (
text-*, font-*)
- Visual (
bg-*, border-*, rounded-*, shadow-*)
- Interactive (
hover:*, focus:*, transition-*)
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: tailwind-css3description: Styling components with Tailwind CSS v4, using the project design tokens and utility classes. Use when this capability is needed.4---56# Tailwind CSS78## Version910This project uses **Tailwind CSS v4** with the Vite plugin (`@tailwindcss/vite`). Configuration is CSS-first, NOT via `tailwind.config.mjs`.1112## Theme Configuration1314All design tokens are defined in `src/styles/global.css` using the `@theme` directive:1516```css17@import "tailwindcss";1819@theme {20 --color-brand-blue: #003087;21 --color-brand-yellow: #FFD100;22 --color-primary: var(--color-brand-blue);23 --color-primary-foreground: #ffffff;24 --color-accent: var(--color-brand-yellow);25 --color-accent-foreground: #003087;26 --color-surface: #ffffff;27 --color-surface-foreground: #1f2937;28 --color-muted: #f1f5f9;29 --color-muted-foreground: #64748b;30 --color-destructive: #dc2626;31 --color-destructive-foreground: #ffffff;32 --color-success: #16a34a;33 --color-success-foreground: #ffffff;34}35```3637## Design Token Usage3839| Token | Utility Class | Use For |40|-------|--------------|---------|41| `brand-blue` | `bg-brand-blue`, `text-brand-blue` | Header, primary headings |42| `brand-yellow` | `bg-brand-yellow`, `text-brand-yellow` | CTAs, accent highlights |43| `primary` | `bg-primary`, `text-primary` | Primary UI elements |44| `accent` | `bg-accent`, `text-accent` | Secondary actions, highlights |45| `surface` | `bg-surface`, `text-surface-foreground` | Card backgrounds, main content |46| `muted` | `bg-muted`, `text-muted-foreground` | Subtle backgrounds, secondary text |47| `destructive` | `bg-destructive` | Error states |48| `success` | `bg-success` | Success states, valid results |4950## Custom Utilities5152```css53@utility focus-ring {54 outline: none;55 @apply ring-2 ring-offset-2 ring-primary;56}57```5859Use `focus-ring` on all focusable interactive elements for consistent focus styling.6061## Rules6263- **Utility-first**: Apply classes directly in `className` / `class`.64- **No `@apply` in components**: Use utility classes. Reserve `@apply` for `global.css` custom utilities only.65- **Responsive**: Mobile-first. Use `sm:`, `md:`, `lg:` breakpoints.66- **No dark mode**: The project does not use dark mode.67- **No `tailwind.config.mjs` for new tokens**: Add all new tokens to `global.css` `@theme` block.6869## Class Order Convention7071Follow this order for readability:721. Layout (`flex`, `grid`, `block`)732. Positioning (`relative`, `absolute`, `z-*`)743. Spacing (`p-*`, `m-*`, `gap-*`)754. Sizing (`w-*`, `h-*`, `max-w-*`)765. Typography (`text-*`, `font-*`)776. Visual (`bg-*`, `border-*`, `rounded-*`, `shadow-*`)787. Interactive (`hover:*`, `focus:*`, `transition-*`)7980---81> Converted and distributed by [TomeVault](https://tomevault.io/claim/sami) — claim your Tome and manage your conversions.82<!-- tomevault:4.0:skill_md:2026-04-16 -->
tomevault-io