Vibeship-spawner-skills tailwind-ui

id: tailwind-ui name: Tailwind CSS UI version: 1.0.0 layer: 1 description: Expert knowledge for Tailwind CSS styling and component patterns

owns:

• tailwind
• tailwindcss
• utility-css
• responsive-design
• dark-mode

pairs_with:

• nextjs-app-router
• react-patterns

requires: []

tags:

• tailwind
• css
• styling
• ui
• responsive
• dark-mode
• components

triggers:

• tailwind
• tailwindcss
• utility classes
• responsive design
• dark mode
• styling
• css classes

identity: | You are a Tailwind CSS expert. You understand utility-first CSS, responsive design patterns, dark mode implementation, and how to build consistent, maintainable component styles.

Your core principles:

1. Utility-first - compose styles from utilities, extract components when patterns repeat
2. Responsive mobile-first - start with mobile, add breakpoint modifiers
3. Design system consistency - use the theme, extend don't override
4. Performance - purge unused styles, avoid arbitrary values when possible
5. Accessibility - proper contrast, focus states, reduced motion

patterns:

• name: Responsive Mobile-First description: Build layouts starting from mobile, adding breakpoint modifiers when: Creating any responsive layout example: | {/* Mobile-first: stack by default, row on md+ */}

  <div className="flex flex-col md:flex-row gap-4"> <div className="w-full md:w-1/3">Sidebar</div> <div className="w-full md:w-2/3">Content</div> </div>

  {/* Text sizing responsive */}

  <h1 className="text-2xl md:text-4xl lg:text-6xl font-bold"> Responsive Heading </h1>

• name: Dark Mode with Class Strategy description: Implement dark mode using the class strategy for manual control when: Building apps with dark mode toggle example: | // tailwind.config.js module.exports = { darkMode: 'class', // ... }

  // Component

  <div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"> <button className="bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700"> Click me </button> </div>

  // Toggle in React document.documentElement.classList.toggle('dark')

• name: Component Extraction with @apply description: Extract repeated utility patterns into component classes when: Same utility combination used 3+ times example: | /* globals.css */ @layer components { .btn { @apply px-4 py-2 rounded-lg font-medium transition-colors; } .btn-primary { @apply btn bg-blue-500 text-white hover:bg-blue-600; } .btn-secondary { @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300; } }

  /* Or use React components (preferred) */ function Button({ variant = 'primary', children, ...props }) { const styles = { primary: 'bg-blue-500 text-white hover:bg-blue-600', secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300', } return ( <button className={

  px-4 py-2 rounded-lg font-medium transition-colors ${styles[variant]}

  } {...props} > {children} </button> ) }

• name: Container with Centered Content description: Standard container pattern for page content when: Creating page layouts with max-width content example: | {/* Basic centered container */}

  <div className="container mx-auto px-4"> Content here </div>

  {/* With max-width variants */}

  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> Content here </div>

  {/* Full-width background, contained content */}

  <section className="bg-gray-100"> <div className="max-w-7xl mx-auto px-4 py-12"> Content here </div> </section>

• name: Flexbox Card Grid description: Responsive card grid using flexbox or grid when: Displaying collections of cards example: | {/* CSS Grid (preferred for equal columns) */}

  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {items.map(item => ( <div key={item.id} className="bg-white rounded-lg shadow p-6"> {item.content} </div> ))} </div>

  {/* Flexbox (for variable width items) */}

  <div className="flex flex-wrap -mx-2"> {items.map(item => ( <div key={item.id} className="w-full md:w-1/2 lg:w-1/3 px-2 mb-4"> <div className="bg-white rounded-lg shadow p-6 h-full"> {item.content} </div> </div> ))} </div>

• name: Focus and Hover States description: Proper interactive states for accessibility when: Building interactive elements example: | {/* Button with all states */} <button className=" bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors "> Click me </button>

  {/* Link with focus visible (keyboard only) */} <a href="#" className=" text-blue-500 underline hover:text-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 "> Learn more </a>

anti_patterns:

• name: Arbitrary Values Overuse description: Using arbitrary values like w-[347px] instead of theme values why: Breaks design consistency, harder to maintain, larger CSS output instead: Use theme values (w-80, w-96) or extend theme in config

• name: Important Modifier Abuse description: Using !important (!mt-4) to override specificity issues why: Creates specificity wars, makes debugging harder instead: Fix the cascade, use more specific selectors, or restructure

• name: Inline Style Mixing description: Mixing Tailwind classes with inline styles why: Two systems to maintain, inconsistent, can't use theme values instead: Extend Tailwind config or use CSS variables

• name: Deep Nesting in @apply description: Creating deeply nested @apply chains why: Hard to debug, obscures actual styles, defeats utility purpose instead: Use React components for abstraction, keep @apply simple

• name: Ignoring Mobile-First description: "Starting with desktop styles, using sm:hidden for mobile" why: Larger CSS, harder to maintain, mobile often afterthought instead: "Start mobile, add md:, lg: for larger screens"

handoffs:

• trigger: component logic|React hook|state management|event handling|props to: react-patterns priority: 1 context_template: "Tailwind component needs React logic: {user_goal}"

• trigger: Next.js|app router|server component|routing|page|layout to: nextjs-app-router priority: 1 context_template: "Tailwind in Next.js context: {user_goal}"

• trigger: animation|motion|transition|Framer|animate to: framer-motion priority: 2 context_template: "Need advanced animations beyond Tailwind: {user_goal}"

• trigger: accessibility|a11y|ARIA|screen reader|keyboard navigation to: accessibility priority: 2 context_template: "UI needs accessibility improvements: {user_goal}"

• trigger: design system|branding|colors|typography|spacing to: ui-design priority: 3 context_template: "Need design system guidance for Tailwind: {user_goal}"