# Tailwind Patterns
> Efficient Tailwind CSS patterns using inheritance and custom config
- Skill: `majiayu000/tailwind-patterns-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/tailwind-patterns-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/tailwind-patterns-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/tailwind-patterns-2
---
# Tailwind Patterns
**Purpose**: Efficient Tailwind CSS (inheritance, minimal wrappers, custom config)
- Keywords: tailwind, styling, css, className, responsive, tw, tailwindcss
## Quick Reference
| Principle | ✅ DO | ❌ AVOID |
|-----------|-------|----------|
| Inheritance | Set at highest level | Repeat inherited styles |
| Elements | Merge classes | Wrapper divs for styling only |
| Colors | Custom config only | Default Tailwind palette |
| Utilities | Only when changing | Redundant classes |
**Custom colors**: `primary`, `secondary`, `tertiary`, `quaternary`, `accent`, `background`
## Set Styles at Highest Level
```tsx
// ✅ Set once, inherits
export function App() {
return (
)
}
// ❌ Repeating inherited
export function Header() {
return (
{/* Already inherited */}
Title
)
}
```
## Only Override When Changing
```tsx
// ✅ Only add utilities that CHANGE
export function Card() {
return (
Title
Body inherits text-background
)
}
// ❌ Re-applying inherited
Title
{/* Redundant */}
```
## Merge Classes, Not Wrappers
```tsx
// ✅ Single element
export function Button({ children }: { children: ReactNode }) {
return (
)
}
// ❌ Wrapper div for styling
export function Button({ children }: { children: ReactNode }) {
return (
)
}
```
## Before Adding Class
1. **Already inherited?** Check parents
2. **Can apply to parent?** Reduce duplication
3. **Wrapper necessary?** Or merge into one element?
4. **Color exists in config?** Only use configured colors
## Custom Colors (Default Palette Removed)
```tsx
// ✅ Using custom config
Text
Accent
// ❌ Default Tailwind (not in config)
Text
```
## Why This Matters
1. **Smaller bundles**: Fewer utilities = smaller CSS
2. **Cleaner DOM**: Fewer wrappers = better performance
3. **Single source**: Styles set once, inherited
4. **Easier refactoring**: Change once at root
5. **Consistent design**: Limited palette enforces system
## Responsive
```tsx