Agent skill · design visual · aiskillstore
tailwind-css
Use when styling UI components or layouts with Tailwind CSS - mobile-first design, responsive utilities, custom themes, or component styling. NOT when plain CSS, CSS-in-JS (styled-components), or non-Tailwind frameworks are involved. Triggers: "style component", "responsive design", "mobile-first", "dark theme", "tailwind classes", "dashboard grid".
Why this skill is useful
Provides specific patterns and configurations for responsive design and theming in Tailwind CSS that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Tailwind CSS Skill Overview Expert guidance for Tailwind CSS styling with mobile-first responsive design, custom themes, and utility-first approach. Focuses on accessibility, dark mode, and performance optimization. When This Skill Applies This skill triggers when users request: Styling: "Style this KPI card", "Button component style", "Design a form" Responsive: "Mobile-first layout", "Responsive dashboard", "Grid with breakpoints" Themes: "Custom dark theme", "Extend tailwind theme", "Color scheme" Layouts: "Dashboard grid", "Card layout", "Flexible container" Core Rules 1. Mobile-First Design Requirements: Base styles for mobile (no prefix) Progressive enhancement with sm:, md:, lg: prefixes Start with mobile layout, enhance for larger screens Use responsive breakpoints: sm:640px, md:768px, lg:1024px 2. Responsive Utilities Requirements: Use fluid utilities (w-full, flex-1) for mobile Add breakpoints (sm:, md:, lg:) for larger screens Consider container queries for nested responsive components Test layouts at multiple breakpoints (375px, 768px, 1024px, 1440px) 3. Custom Themes Requirements: Extend theme in tailwind.config.ts, don't override Use semantic names (primary, secondary, accent) Define custom colors, fonts, spacing in theme Support CSS variables for dynamic theming Use darkMode: 'class' for manual dark mode toggle 4. Component Styling Requirements: Prefer inline utility classes over custom CSS Use @apply sparingly (only for repeated patterns) Extract complex variants with CVA or similar libraries Follow shadcn/ui patterns for consistent styling Use template literals for conditional classes Output Requirements Code Files 1. Component Styling: Inline utility classes in JSX/TSX Conditional classes for variants (dark/light, sizes) Focus states and transitions 2. Configuration: tailwind.config.ts updates for custom themes globals.css for global styles and directives 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/tailwind-css