tailwind-css

---

name: tailwind-css description: Utility-first CSS framework for rapid UI development license: MIT compatibility: opencode metadata: category: styling approach: utility-first responsive: mobile-first

What I do

I provide comprehensive knowledge and implementation guidance for Tailwind CSS, the utility-first CSS framework. I help you:

• Master utility classes for layout, typography, colors, and effects
• Configure and customize Tailwind for your design system
• Implement responsive design patterns efficiently
• Optimize build processes and purge unused styles
• Create custom components and design tokens
• Integrate with component libraries and frameworks

When to use me

Load this skill when you're:

• Building projects with Tailwind CSS
• Need to research utility classes or configuration options
• Setting up Tailwind in a new project or framework
• Creating custom themes or design systems
• Optimizing Tailwind builds for production
• Troubleshooting styling issues or responsive behavior

How I work

I use the Context7 MCP to fetch the latest documentation and examples from Tailwind CSS. This ensures you always get current information about:

• Complete utility class reference
• Configuration options and customization
• Plugin system and third-party integrations
• Framework-specific setup guides
• Performance optimization techniques
• Migration guides and breaking changes

Key Areas of Expertise

Core Utilities

• Layout (Flexbox, Grid, Positioning, Spacing)
• Typography (Font families, sizes, weights, line heights)
• Colors (Palette, opacity, gradients)
• Borders and effects (Shadows, transforms, filters)
• Responsive design (Breakpoints, mobile-first approach)

Advanced Features

• Custom property integration (CSS variables)
• Dark mode implementation
• Animation and transition utilities
• Container queries and modern CSS features
• Plugin development and customization

Configuration & Setup

• Tailwind config file optimization
• Content purging and JIT compilation
• Framework integration (React, Vue, Svelte, Next.js)
• Build tool configuration (Vite, Webpack, PostCSS)
• Design token management

Performance & Optimization

• Bundle size optimization
• Critical CSS extraction
• Unused style purging
• Production build strategies

Usage Instructions

When you load this skill, I will:

1. Research First: Use context7_resolve-library-id to find the correct Tailwind CSS library ID
2. Query Documentation: Use context7_query-docs to fetch relevant information based on your specific needs
3. Provide Context: Give you current, accurate information about utilities, configuration, and best practices
4. Generate Examples: Create implementation examples based on the latest documentation

Example Queries I Can Help With

• "How do I set up Tailwind CSS with Next.js and TypeScript?"
• "What are the best utility classes for creating a responsive card layout?"
• "How do I customize the color palette and add custom design tokens?"
• "Show me how to implement dark mode with Tailwind CSS"
• "What's the most efficient way to create reusable component styles?"
• "How do I optimize Tailwind CSS for production builds?"

Design System Integration

I excel at helping you:

• Create consistent spacing and typography scales
• Implement brand colors and design tokens
• Build reusable component patterns
• Maintain design system documentation
• Ensure accessibility compliance with utility classes

Framework-Specific Patterns

I provide guidance for:

• React: Conditional classes, component styling patterns
• Vue: Class binding and scoped styles integration
• Svelte: Style directives and component composition
• Next.js: SSR considerations and optimization
• Astro: Component styling and build optimization

Integration Notes

This skill works best when combined with:

• shadcn-ui skill for component library styling
• atomic-design skill for component architecture
• typescript-advanced-types skill for type-safe styling
• Framework-specific skills for optimal integration

Always use Context7 to get the most current information about utilities, configuration options, and best practices rather than relying on potentially outdated knowledge.