# Research Tailwind

> Research Tailwind CSS v4 patterns, components, and responsive design using Exa code search and Ref documentation

- Skill: `majiayu000/research-tailwind` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/research-tailwind`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/research-tailwind/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/research-tailwind

---


# 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
```typescript
// Documentation
Query: "Tailwind CSS v4 new features changes"

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

### Oxide Engine
```typescript
// Documentation
Query: "Tailwind v4 oxide engine performance"

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

## Common Research Topics

### Layout Patterns
```typescript
// Documentation
Query: "Tailwind flexbox grid layout patterns"

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

### Responsive Design
```typescript
// Documentation
Query: "Tailwind responsive breakpoints mobile first"

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

### Dark Mode
```typescript
// Documentation
Query: "Tailwind dark mode class strategy"

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

### Animations
```typescript
// Documentation
Query: "Tailwind animation transition transform"

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

### Custom Components
```typescript
// 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)