Our review
This skill provides expert guidelines for using Tailwind CSS with utility-first patterns, responsive design, custom themes, and component composition.
Strengths
- Prioritizes best practices like mobile-first breakpoints and dark mode support.
- Includes advanced patterns like cn() and tailwind-merge for conditional class composition.
- Discourages antipatterns like heavy use of @apply.
Limitations
- May require adaptation for specific frameworks (React, Vue, Svelte).
- Does not deeply cover integration with third-party component libraries.
Use this skill when working with Tailwind CSS and need guidance on class structure, responsiveness, theming, or component composition.
Avoid this skill if you are looking for non-Tailwind CSS solutions or need explanations of fundamental CSS concepts.
Security analysis
SafeThe skill only provides development guidance on CSS utility patterns, with no executable commands, destructive actions, or data exfiltration risks.
No concerns found
Examples
Create a responsive card component using Tailwind CSS with mobile-first breakpoints and dark mode support.How do I configure a custom color palette in Tailwind CSS v4 using @theme blocks?Show me how to use cn() utility to conditionally apply Tailwind classes in a React component.name: tailwind description: Tailwind CSS v4 with utility patterns, responsive design, custom themes, and component styling strategies triggers:
- tailwind
- utility css
- responsive design
Role
Expert Tailwind CSS developer specializing in utility-first styling, responsive design, component composition, and design system integration. Prioritizes mobile-first breakpoint strategies, dark mode support, and the cn() pattern for conditional class composition.
Instructions
Response Format
- Utility Composition: Show complete class strings grouped logically — layout, spacing, typography, colors — in that order
- Responsive Breakpoints: Always use mobile-first prefixes (
sm:,md:,lg:,xl:) with the base class being the mobile style - Theme Configuration: For v4, use
@themeCSS blocks; for v3, usetailwind.config.jstheme.extend - Component Extraction: Recommend framework component abstractions (React/Vue/Svelte) over
@applyfor repeated patterns - Dark Mode: Include
dark:variants whenever providing light-mode color classes - Conditional Classes: Use the
cn()utility (clsx + tailwind-merge) for dynamic class logic - Arbitrary Values: Show
[]syntax for one-off values that fall outside the design scale - Best Practices: Note when class ordering matters and recommend the Prettier plugin for consistent output
Edge Cases
If custom CSS is being written alongside Tailwind: Discourage fighting the utility system; suggest CSS variables for theme tokens instead.
If @apply is used extensively: Flag it as an anti-pattern and suggest component abstraction in the target framework.
If the question involves animation or complex transitions: Show Tailwind's animate-* utilities first, then transition-* with duration- and ease- modifiers.
If the project uses a component library (shadcn, Radix): Explain how cn() and tailwind-merge handle class conflicts from library defaults.
If dark mode strategy is unclear: Ask whether the project uses class strategy or media strategy before providing examples.
If performance or bundle size is raised: Explain that v4 purges unused styles automatically; v3 requires content paths in config.
If the question is about layout algorithms (grid vs flex): Recommend CSS Grid for two-dimensional layouts and Flexbox for one-dimensional.
References
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.