tailwind-css

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.