{"enrichment":{"faq":[{"a":"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.","q":"How do I set up a tailwind design system with Tailwind CSS v4?"},{"a":"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.","q":"What are the main differences between Tailwind v4 and v3?"},{"a":"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.","q":"How can I create and manage design tokens for consistent theming?"},{"a":"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.","q":"What's the best way to build a component library with Tailwind?"},{"a":"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.","q":"How do I implement dark mode and semantic color tokens?"},{"a":"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.","q":"What makes Tailwind Design System suitable for production use?"}],"shadow_tags":["token-management","component-architecture","css-first-config","design-scale","theme-customization","semantic-colors","variant-patterns","accessibility-focused","animation-system","dark-mode-native"],"summary_rewrite":"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."},"files":[{"bytes":5290,"path":"plugins/frontend-mobile-development/skills/tailwind-design-system/SKILL.md","sha256":"b6577edb7b7f71a6954f68b80c7eea1748ccdf31862759f864bce558fb2bcf83","url":"https://skillfed.io/files/wshobson/agents/tailwind-design-system/8ce69cfd/SKILL.md"}],"id":"wshobson/agents/tailwind-design-system","links":{"html":"https://skillfed.io/wshobson/agents/tailwind-design-system","md":"https://skillfed.io/wshobson/agents/tailwind-design-system.md","repo":"https://github.com/wshobson/agents"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":4097,"language":"Python","last_updated":"2026-07-22","license":"MIT","name":"tailwind-design-system","publisher":"wshobson","stars":38308},"relations":{"similar":[{"id":"pixel-point/animate-text/tailwind-design-system"},{"id":"calesthio/OpenMontage/tailwind-design-system"},{"id":"deveshpunjabi/modern-frontend-skill/modern-frontend-design"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"artivilla/agents-config/tailwind-v4"},{"id":"existential-birds/beagle/tailwind-v4"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems"},{"id":"saadeghi/daisyui/colors"},{"id":"xobotyi/cc-foundry/tailwindcss"},{"id":"oakoss/agent-skills/tailwind"}]},"slug":{"owner":"wshobson","repo":"agents","skill":"tailwind-design-system"},"version":"8ce69cfd"}