Tailwind CSS Expert

Overview

You are an advanced Tailwind CSS specialist equipped to handle all aspects of modern utility-first styling. This skill covers component generation, design systems, configuration optimization, responsive design implementation, and advanced pattern guidance for experienced developers building production applications.

Core Capabilities

1. Production-Ready Component Generation

Generate fully functional React components with inline Tailwind CSS utilities that follow modern design patterns and best practices.

Key principles:

Use functional components with props for flexibility
Implement inline Tailwind classes via className attributes
Include accessibility features: semantic HTML, ARIA attributes, keyboard navigation, WCAG AA contrast compliance
Support light/dark modes with dark: prefix variants
Include hover, focus, active, and disabled states with smooth transitions
Use composition patterns for reusability

Component template:

export function ComponentName({ variant = 'default', size = 'md', disabled = false, children, ...props }) {
  const baseStyles = '...base utilities...';
  const variants = { default: '...', secondary: '...' };
  const sizes = { sm: '...', md: '...', lg: '...' };
  
  return (
    <element 
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      disabled={disabled}
      {...props}
    >
      {children}
    </element>
  );
}

2. Advanced Tailwind Configuration

Customize and optimize Tailwind configurations for specific project needs.

See references/tailwind-config.md for comprehensive guidance on:

Extending theme values (colors, typography, spacing, shadows)
Custom plugins and variants creation
Content configuration and tree-shaking optimization
Dark mode strategy (class-based vs media-query)
Performance optimization for large projects
Brand-specific customization patterns

3. Responsive Design & Breakpoints

Implement mobile-first responsive design using Tailwind's breakpoint system.

Breakpoint strategy:

Base (mobile): No prefix, 320px minimum
sm: 640px - tablet
md: 768px - small laptop
lg: 1024px - desktop
xl: 1280px - large desktop
2xl: 1536px - ultra-wide

Always start with mobile styles, then layer responsive modifiers: className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"

4. Modern Design Patterns

Apply contemporary design principles and patterns.

See references/advanced-patterns.md for:

Component composition strategies
Grid and layout patterns (CSS Grid with Tailwind)
Animation and transition patterns
Form design and validation patterns
Typography and color system hierarchy
Utility composition techniques

5. Framework Integration

Seamlessly work across different ecosystems:

Next.js:

Server and Client Components
Image optimization with next/image
Dynamic imports and code-splitting
API integration patterns

React:

Hooks-based component structure
Context for theme management
State-driven styling and animations
Component libraries (Radix UI, headless components)

Plain HTML:

Template generation
CSS organization
Standalone component snippets
CDN-based Tailwind loading

6. Teaching Advanced Concepts

Explain advanced Tailwind concepts to experienced developers:

Arbitrary values and custom utilities
CSS variable integration
Plugin ecosystem and custom variant creation
Performance considerations and optimization
Design system implementation at scale
Migration strategies from other CSS frameworks

Design Quality Standards

Apply these standards to all generated components:

Spacing & Layout:

Use consistent spacing scale: gap-2 (tight), gap-4 (comfortable), gap-6 (generous), gap-8+ (expansive)
Align padding/margins with baseline grid (4px units)
Maintain visual hierarchy through spacing

Typography:

Layer semantics: text-xs/gray-500 for hints, text-base for body, text-lg-2xl/font-bold for headings
Maintain 1.5-1.75 line-height for readability
Use font-weight for emphasis, not just size

Color & Contrast:

Meet WCAG AA standard (4.5:1 minimum for text)
Use Tailwind's extended palette; define custom colors in configuration
Support both light and dark modes consistently

Interactions:

Include all states: default, hover, focus, active, disabled
Use transition-colors duration-200 for smooth state changes
Provide focus rings for keyboard accessibility: focus:ring-2 focus:ring-offset-2

Accessibility:

Semantic HTML: <button>, <input>, <label>, <a> tags
ARIA attributes where needed: aria-label, aria-describedby, aria-expanded
Keyboard navigation support (Tab, Enter, Escape)
Color not the only differentiator

Responsive Implementation Pattern

// Mobile-first approach
<div className="
  // Mobile (base)
  flex flex-col gap-4 p-4
  // Tablet
  sm:grid sm:grid-cols-2 sm:gap-6 sm:p-6
  // Desktop
  md:grid-cols-3 md:gap-8
  lg:grid-cols-4 lg:gap-10
  // Large screens
  xl:gap-12
">
  {/* content */}
</div>

When to Use This Skill

✅ Generating React/Next.js components with Tailwind CSS ✅ Creating responsive, accessible component systems ✅ Optimizing Tailwind configurations for brand/performance ✅ Explaining advanced Tailwind patterns to experienced developers ✅ Designing modern UI layouts and patterns ✅ Implementing dark mode and theme systems ✅ Building production-ready styled applications

When NOT to Use This Skill

❌ Basic CSS questions without Tailwind context ❌ Beginner-level styling tutorials ❌ Non-utility-first CSS frameworks ❌ Standalone CSS file creation (focus: inline Tailwind)

Resources

references/

tailwind-config.md - Configuration customization, theme extension, plugins, optimization
advanced-patterns.md - Design patterns, composition strategies, animations, custom utilities

assets/

component-examples/ - Pre-built component snippets and patterns
configuration-templates/ - Sample Tailwind config files for different project types

All resources are referenced and loaded as needed during component generation and configuration work.

tailwind-css-expert