# Tailwind Config
> Update Tailwind CSS configuration, custom themes, and design tokens across packages. Use when adding new colors, spacing scales, or customizing the design system. Use when this capability is needed.
- Skill: `tomevault-io/tailwind-config` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/tailwind-config`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tailwind-config/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/tailwind-config
---
# Tailwind CSS Configuration Skill
## Configuration Structure
```
packages/ui/
├── tailwind.config.ts # Base config with shadcn/ui theming
└── src/styles/globals.css # CSS variables
apps/web/
├── tailwind.config.ts # Extends UI package config
└── src/app/globals.css # App-specific styles
```
## CSS Variables
Defined in `packages/ui/src/styles/globals.css`:
```css
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--muted: 210 40% 96.1%;
--accent: 210 40% 96.1%;
--destructive: 0 84.2% 60.2%;
--border: 214.3 31.8% 91.4%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
/* ... dark mode values */
}
}
```
## Adding Custom Colors
```typescript
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
brand: {
primary: "#0070F3",
secondary: "#7928CA",
},
},
},
},
};
```
## Adding Animations
```typescript
theme: {
extend: {
keyframes: {
shimmer: {
"0%": { backgroundPosition: "-200% 0" },
"100%": { backgroundPosition: "200% 0" },
},
},
animation: {
shimmer: "shimmer 2s linear infinite",
},
},
}
```
## Custom Utilities
```css
/* globals.css */
@layer utilities {
.text-balance {
text-wrap: balance;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
}
```
## Plugins
```typescript
plugins: [
require("@tailwindcss/typography"), // prose classes
require("@tailwindcss/forms"), // form resets
require("tailwindcss-animate"), // animations
]
```
## Size Utility Convention
Use `size-*` instead of `h-* w-*` for equal dimensions:
```tsx
// ✅ Good
Icon
Avatar
// ❌ Avoid
Icon
```
## Dark Mode
**Tailwind v4** uses a CSS custom variant instead of config-based `darkMode`:
```css
/* globals.css */
@custom-variant dark (&:is(.dark *));
```
This is already configured in both `apps/web/src/app/globals.css` and `packages/ui/src/styles/globals.css`. Dark CSS variables are fully defined in `.dark` blocks in both files.
**Theme switching** uses `next-themes` with `attribute="class"` to toggle `.dark` on ``:
```tsx
import { useTheme } from "next-themes";
const { resolvedTheme, setTheme } = useTheme();
```
**Status**: Dark mode activation is deferred until after HeroUI v3 migration (#714, blocked by #587). The CSS infrastructure is ready.
## Debugging
```bash
# Check resolved config
npx tailwindcss config
# Watch for generated classes
TAILWIND_MODE=watch npx tailwindcss -i ./src/styles/globals.css -o ./dist/output.css --watch
```
**Common issues:**
- Classes not applying → Check content paths
- Dark mode not working → Verify `darkMode: ["class"]` and ThemeProvider
- Classes purged → Add to safelist or use complete class names
## Best Practices
1. **Mobile-first** - Default styles for mobile, add breakpoints up
2. **CSS Variables** - Use for theming (enables dark mode)
3. **Content paths** - Include all component paths
4. **Semantic names** - Use `brand`, `accent` not `blue-500`
5. **Size utility** - Use `size-*` for equal dimensions
## References
- Tailwind CSS: https://tailwindcss.com
- Design tokens: See `design-language-system` skill
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/sgcarstrends) — claim your Tome and manage your conversions.