tailwind-css

# Tailwind CSS Skill Expert assistance for Tailwind CSS configuration, custom design systems, plugin development, and component styling patterns. ## Capabilities - Configure Tailwind CSS for various frameworks - Create custom design tokens and themes - Build reusable component patterns - Develop custom Tailwind plugins - Implement dark mode and theming - Optimize production builds ## Usage Invoke this skill when you need to: - Set up Tailwind CSS in a project - Create a custom design system - Build component style patterns - Implement theming and dark mode - Optimize Tailwind configuration ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | framework | string | No | react, nextjs, vue, vanilla | | features | array | No | dark-mode, custom-colors, typography, forms, animations | | designTokens | object | No | Custom colors, spacing, fonts | | plugins | array | No | Tailwind plugins to include | ### Configuration Example ```json { "framework": "nextjs", "features": ["dark-mode", "typography", "forms", "animations"], "designTokens": { "colors": { "primary": "#3B82F6", "secondary": "#10B981" }, "fontFamily": { "sans": "Inter", "mono": "JetBrains Mono" } }, "plugins": ["@tailwindcss/typography", "@tailwindcss/forms"] } ``` ## Output Structure ``` project/ ├── tailwind.config.ts # Main configuration ├── postcss.config.js # PostCSS configuration ├── app...