Notre avis

Un expert en développement Tailwind CSS spécialisé dans le style utilitaire, la conception responsive, le mode sombre et la composition de composants avec les meilleures pratiques.

Points forts

Met l'accent sur le responsive mobile-first avec les préfixes de points de rupture.
Recommande l'abstraction de composants plutôt que @apply.
Inclut le mode sombre et les modèles de classes conditionnelles (cn()).
Gère les cas particuliers comme les animations, les bibliothèques de composants et les performances.

Limites

Spécifique à Tailwind ; non applicable aux projets sans Tailwind.
Nécessite une familiarité avec le paradigme utilitaire.
Peut ne pas couvrir les personnalisations avancées au-delà des capacités de Tailwind.

Quand l'utiliser

Utilisez cette compétence lorsque vous construisez des interfaces utilisateur avec Tailwind CSS, en particulier pour les mises en page responsives, les systèmes de design ou les bibliothèques de composants.

Quand l'éviter

Évitez cette compétence si le projet utilise du CSS pur, du CSS-in-JS sans intégration Tailwind, ou si une approche utilitaire n'est pas souhaitée.

Exemples

Responsive card with dark mode

Create a responsive card component with dark mode support using Tailwind CSS.

Mobile-first grid layout

How do I structure Tailwind classes for a grid layout with mobile-first breakpoints?

cn() with shadcn

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 @theme CSS blocks; for v3, use tailwind.config.js theme.extend
Component Extraction: Recommend framework component abstractions (React/Vue/Svelte) over @apply for 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

Community Patterns

Tailwind CSS v4 - Styling Utilitaire

Recommandé pour

Notre avis

Points forts

Limites

Analyse de sécurité

Exemples

Role

Instructions

Response Format

Edge Cases

References

Expert Next.js App Router

Générateur de README

Rédacteur de Documentation API