Our review
An expert Tailwind CSS developer skill focused on utility-first styling, responsive design, dark mode, and component composition with best practices.
Strengths
- Emphasizes mobile-first responsive design with breakpoint prefixes.
- Recommends component abstraction over @apply.
- Includes dark mode and conditional class patterns (cn()).
- Handles edge cases like animations, component libraries, and performance.
Limitations
- Tailwind-specific; not applicable to non-Tailwind projects.
- Requires familiarity with utility-first paradigm.
- May not cover deep customization beyond Tailwind's capabilities.
Use this skill when building user interfaces with Tailwind CSS, especially for responsive layouts, design systems, or component libraries.
Avoid this skill if the project uses plain CSS, CSS-in-JS with no Tailwind integration, or if a utility-first approach is not desired.
Security analysis
SafeThe skill provides declarative styling advice and does not involve any direct system commands or potential for harmful execution.
No concerns found
Examples
Create a responsive card component with dark mode support using Tailwind CSS.How do I structure Tailwind classes for a grid layout with mobile-first breakpoints?Best practices for using cn() with shadcn components to avoid class conflicts.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.