Agent skill
research-tailwind
Research Tailwind CSS v4 patterns, components, and responsive design using Exa code search and Ref documentation
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/research-tailwind
SKILL.md
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
-
Identify Styling Need
- Layout (flex, grid)?
- Responsive design?
- Animations and transitions?
- Dark mode?
- Custom components?
-
Search Documentation (Ref)
Query patterns: - "Tailwind CSS v4 [feature]" - "Tailwind responsive design" - "Tailwind dark mode" - "Tailwind custom theme" -
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:
- Component examples - Complete styled components
- Responsive patterns - Mobile-first implementations
- Dark mode - Theme switching patterns
- Accessibility - WCAG compliant patterns
- Best practices - Class organization, composition
- 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)
Didn't find tool you were looking for?