modern-tailwind_skill

Overview

This skill helps designers and developers build clean, scalable UIs with Tailwind CSS by applying modern utilities, variants, and maintainable patterns. It focuses on utility-first practices, responsive strategies, and theme-driven configuration to reduce custom CSS and speed development. The guidance balances practical rules with examples for real projects.

How this skill works

The skill inspects typical UI patterns and recommends Tailwind-first solutions: grouping utilities for readability, choosing appropriate variants (hover, focus-visible, dark, motion-safe), and using group/peer for stateful interactions without extra JavaScript. It advises when to extend the theme or create small reusable components via @layer, and when to avoid overusing @apply. It also outlines responsive and container-query strategies and maintainability tactics to prevent class bloat.

When to use it

• When building component-driven interfaces that should remain consistent and scalable
• When migrating legacy CSS to Tailwind utilities without losing semantics
• When implementing accessible interactive states (focus, hover, disabled) using variants
• When creating responsive layouts that depend on breakpoints or container size
• When theming apps via tailwind.config instead of ad-hoc color or spacing values

Best practices

• Prefer utility classes over custom CSS for most styling to keep CSS surface area small
• Group class lists by purpose (layout → spacing → typography → color → effects) for readability
• Use semantic HTML first; enhance visuals with utilities rather than replacing structure
• Prefer data-* and aria-* variants for state tied to DOM semantics; use group/peer to handle parent/sibling state
• Extend the theme in tailwind.config and use @layer for reusable utilities; avoid heavy use of @apply except for small patterns
• Extract repeated class sets into components to keep class strings short and deterministic

Example use cases

• Creating a design-system component library with consistent tokens in tailwind.config
• Converting a legacy stylesheet into utility classes while preserving accessibility semantics
• Building interactive elements that rely on focus-visible and motion-safe for better UX
• Implementing responsive card/grid layouts using base utilities and container queries
• Theming an application with tokens and small @layer components to minimize override complexity