tailwind-design-system
Create consistent, scalable design systems using Tailwind CSS utility classes with custom themes, design tokens, and responsive design patterns. Use when building design systems, implementing custom t
SKILL.md.claude/skills/tailwind-design-system/SKILL.md
GitHubTailwind CSS - Utility-First Styling
When to use this skill
- Building design systems with Tailwind CSS
- Implementing custom themes and design tokens
- Creating reusable utility class patterns
- Configuring Tailwind theme extensions
- Implementing light and dark mode themes
- Building responsive layouts with Tailwind grid/flexbox
- Creating consistent spacing and typography scales
- Using arbitrary values for one-off styles
- Implementing custom color palettes
- Building component variants with Tailwind
- Creating animation and transition systems
- Establishing design consistency across projects
When to use this skill
- Styling with Tailwind, creating design systems, responsive layouts.
- When working on related tasks or features
- During development that requires this expertise
Use when: Styling with Tailwind, creating design systems, responsive layouts.
Core Pattern
```jsx
<div className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"> <h2 className="text-xl font-bold">Title</h2> </div> \`\`\`