Research Tailwind CSS Patterns

Use this skill when you need to:

• Learn Tailwind CSS v4 new features
• Find responsive design patterns
• Research animation and transition patterns
• Understand dark mode implementation
• Learn custom theme configuration

Process

1. Identify Styling Need

   • Layout (flex, grid)?
   • Responsive design?
   • Animations and transitions?
   • Dark mode?
   • Custom components?

2. Search Documentation (Ref)

   Query patterns:
   - "Tailwind CSS v4 [feature]"
   - "Tailwind responsive design"
   - "Tailwind dark mode"
   - "Tailwind custom theme"
   

3. Find Component Examples (Exa)

   Query patterns:
   - "Tailwind CSS v4 [component] responsive example"
   - "Tailwind dark mode toggle implementation"
   - "Tailwind custom component library example"
   - "Tailwind animation transition hover example"
   

Tailwind v4 Specific Research

New Features

// Documentation
Query: "Tailwind CSS v4 new features changes"

// Code examples
Query: "Tailwind v4 PostCSS configuration Next.js example"

Oxide Engine

// Documentation
Query: "Tailwind v4 oxide engine performance"

// Code examples
Query: "Tailwind v4 oxide Next.js setup configuration"

Common Research Topics

Layout Patterns

// Documentation
Query: "Tailwind flexbox grid layout patterns"

// Code examples
Query: "Tailwind responsive grid layout mobile desktop example"

Responsive Design

// Documentation
Query: "Tailwind responsive breakpoints mobile first"

// Code examples
Query: "Tailwind responsive navbar mobile menu example"

Dark Mode

// Documentation
Query: "Tailwind dark mode class strategy"

// Code examples
Query: "Tailwind dark mode toggle next-themes implementation"

Animations

// Documentation
Query: "Tailwind animation transition transform"

// Code examples
Query: "Tailwind animation hover transition smooth example"

Custom Components

// Documentation
Query: "Tailwind component patterns reusable"

// Code examples
Query: "Tailwind custom button component variants example"

Integration with Project Stack

Radix UI + Tailwind

Query: "Tailwind Radix UI component styling example"
Query: "Tailwind Radix Dialog Dropdown styling best practices"

CVA (Class Variance Authority)

Query: "Tailwind CVA class variance authority component variants"
Query: "cva Tailwind button variants TypeScript example"

Framer Motion + Tailwind

Query: "Tailwind Framer Motion animation integration example"

Next.js Integration

Query: "Tailwind CSS Next.js 15 app router configuration"

Component Patterns

Navigation

Query: "Tailwind responsive navbar dropdown menu example"

Forms

Query: "Tailwind form input validation error states example"

Cards

Query: "Tailwind card component hover shadow gradient example"

Modals

Query: "Tailwind modal dialog overlay backdrop example"

Tables

Query: "Tailwind responsive table mobile scroll example"

Buttons

Query: "Tailwind button variants sizes loading states example"

Advanced Patterns

Custom Utilities

Query: "Tailwind custom utility classes plugin configuration"

Theme Customization

Query: "Tailwind custom theme colors fonts spacing configuration"

Plugins

Query: "Tailwind plugin custom utilities components example"

Typography

Query: "Tailwind typography plugin prose markdown styling"

Aspect Ratios

Query: "Tailwind aspect ratio responsive image video example"

Responsive Design Research

Mobile First

Query: "Tailwind mobile first responsive design patterns"

Breakpoints

Query: "Tailwind custom breakpoints responsive utilities"

Container Queries

Query: "Tailwind container queries responsive components"

Accessibility

Query: "Tailwind accessibility focus states keyboard navigation"
Query: "Tailwind ARIA screen reader utilities example"

Performance

Query: "Tailwind CSS purge optimization production bundle size"
Query: "Tailwind v4 performance optimization JIT mode"

Output Format

Provide:

1. Component examples - Complete styled components
2. Responsive patterns - Mobile-first implementations
3. Dark mode - Theme switching patterns
4. Accessibility - WCAG compliant patterns
5. Best practices - Class organization, composition
6. Integration guide - How to use with project stack

Project Context

Your project uses:

• Tailwind CSS 4.1.13
• PostCSS 8.5.5+
• next-themes 0.4.6 (dark mode)
• Radix UI components
• CVA for variants
• Framer Motion for animations

Common Use Cases

Dashboard Layout

Research: "Tailwind dashboard sidebar responsive layout example"

Landing Page

Research: "Tailwind landing page hero section gradient example"

Authentication Pages

Research: "Tailwind login signup form centered layout example"

Data Tables

Research: "Tailwind data table sortable responsive example"

When to Use

• Designing new components
• Creating responsive layouts
• Implementing dark mode
• Building custom themes
• Optimizing CSS bundle size
• Learning new Tailwind v4 features
• Debugging styling issues

Design Systems

Research building a design system:

Query: "Tailwind design system component library tokens example"
Query: "Tailwind shadcn/ui component structure patterns"

Related Skills

• research-nextjs (for integration)
• research-react (for component patterns)
• research-typescript (for type-safe classes)