AgentSkillsCN

research-tailwind

借助 Exa 代码搜索与 Ref 文档，研究 Tailwind CSS v4 的各类模式、组件设计以及响应式布局方案。

SKILL.md
--- frontmatter
name: research-tailwind
description: Research Tailwind CSS v4 patterns, components, and responsive design using Exa code search and Ref documentation

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)

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

    Find Component Examples (Exa)

    code
    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

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

CVA (Class Variance Authority)

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

Framer Motion + Tailwind

code
Query: "Tailwind Framer Motion animation integration example"

Next.js Integration

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

Component Patterns

Navigation

code
Query: "Tailwind responsive navbar dropdown menu example"

Forms

code
Query: "Tailwind form input validation error states example"

Cards

code
Query: "Tailwind card component hover shadow gradient example"

Modals

code
Query: "Tailwind modal dialog overlay backdrop example"

Tables

code
Query: "Tailwind responsive table mobile scroll example"

Buttons

code
Query: "Tailwind button variants sizes loading states example"

Advanced Patterns

Custom Utilities

code
Query: "Tailwind custom utility classes plugin configuration"

Theme Customization

code
Query: "Tailwind custom theme colors fonts spacing configuration"

Plugins

code
Query: "Tailwind plugin custom utilities components example"

Typography

code
Query: "Tailwind typography plugin prose markdown styling"

Aspect Ratios

code
Query: "Tailwind aspect ratio responsive image video example"

Responsive Design Research

Mobile First

code
Query: "Tailwind mobile first responsive design patterns"

Breakpoints

code
Query: "Tailwind custom breakpoints responsive utilities"

Container Queries

code
Query: "Tailwind container queries responsive components"

Accessibility

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

Performance

code
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

code
Research: "Tailwind dashboard sidebar responsive layout example"

Landing Page

code
Research: "Tailwind landing page hero section gradient example"

Authentication Pages

code
Research: "Tailwind login signup form centered layout example"

Data Tables

code
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:

code
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)