Tailwind CSS
Utility-first CSS with Tailwind — custom design systems, responsive patterns, dark mode, animations, and component variants.
How it works
Generates responsive, accessible UI with utility classes, proper breakpoints (sm/md/lg/xl), dark mode variants, and animations. Understands extending the config for custom design systems rather than fighting the framework. Uses @apply sparingly for truly reusable patterns.
Example prompts
“Build a responsive pricing card grid with hover effects and dark mode”
“Create a custom Tailwind config with brand colors and typography”
“Convert my CSS modules to Tailwind without changing the design”
Real-world example
A design team converted Figma designs into 30+ components with responsive behavior, dark mode, and focus-visible states — matching the design system's spacing and color palette exactly through a custom tailwind.config.js.
Try the Tailwind CSS skill
Available on all plans. 71 skills total. Start free.
Get Started Free