tailwind-design-system
Tailwind Design System guides you through building production-ready design systems with Tailwind CSS v4, covering CSS-first configuration, design tokens, component variants, and accessibility. Learn v4's key changes from v3, including @theme syntax, semantic color tokens with OKLCH, and class-based dark mode setup.
Tailwind Design System helps you build scalable design systems with Tailwind CSS v4 and design tokens.
AI-generated summary based on this skill's SKILL.md
Install
wshobson/agents/tailwind-design-system · repository language: Python
git clone https://github.com/wshobson/agents
cp -r agents/plugins/frontend-mobile-development/skills/tailwind-design-system ~/.claude/skills/tailwind-design-systemnpx skillfed install wshobson/agents/tailwind-design-systemFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up a tailwind design system with Tailwind CSS v4?
Tailwind Design System provides a comprehensive guide to building production-ready design systems using Tailwind CSS v4's CSS-first approach. Start by configuring your @theme block to define semantic color tokens, spacing scales, and typography systems. The skill covers setting up design tokens with OKLCH color spaces for better consistency, establishing component variants for reusability, and organizing your configuration for scalability across teams.
What are the main differences between Tailwind v4 and v3?
Tailwind Design System explains that v4 introduces a CSS-first configuration model replacing the JavaScript config, the @theme directive for centralized token management, improved OKLCH color support for semantic theming, and enhanced custom variant syntax. The skill includes migration guidance from v3 to v4, helping you adopt new patterns while maintaining backward compatibility where possible and understanding deprecations.
How can I create and manage design tokens for consistent theming?
Tailwind Design System teaches you to build a semantic color token system using @theme configuration with OKLCH values, establishing a design token hierarchy for colors, spacing, typography, and animations. Learn how to structure tokens for maintainability, implement dark mode through CSS custom properties and class-based strategies, and ensure consistency across your component library while supporting theme variations.
What's the best way to build a component library with Tailwind?
Tailwind Design System guides you through creating responsive and accessible component libraries using Tailwind's variant system. Implement component variants for different states and sizes, leverage CSS-first patterns for composition, and establish accessibility standards. The skill covers organizing components for production use, documenting design patterns, and scaling your library across teams.
How do I implement dark mode and semantic color tokens?
Tailwind Design System shows how to set up dark mode using class-based or system preference strategies with v4's CSS-first configuration. Define semantic color tokens (primary, secondary, surface, text) using OKLCH color spaces for better perceptual consistency, configure @theme directives for theme switching, and implement token hierarchies that support multiple color schemes and accessibility requirements.
What makes Tailwind Design System suitable for production use?
Tailwind Design System is built on MIT licensing and focuses on production-ready patterns including scalable UI architecture, component variants for accessibility, responsive design best practices, and maintainable token systems. It covers design system governance, documentation strategies, and patterns that support team collaboration while ensuring consistency across large-scale applications.
SKILL.md
rendered from the published skill — quoted content, verbatim
Tailwind Design System (v4)
Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.
> Note: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the upgrade guide.
When to Use This Skill
- Creating a component library with Tailwind v4
- Implementing design tokens and theming with CSS-first configuration
- Building responsive and accessible components
- Standardizing UI patterns across a codebase
- Migrating from Tailwind v3 to v4
- Setting up dark mode with native CSS features
Key v4 Changes
| v3 Pattern | v4 Pattern |
|---|---|
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
plugins/frontend-mobile-development/skills/tailwind-design-system/SKILL.md
plugins/frontend-mobile-development/skills/tailwind-design-system/references/advanced-patterns.md
plugins/frontend-mobile-development/skills/tailwind-design-system/references/details.md