Does this skill support Tailwind CSS v4?

Yes, these patterns are fully compatible with both Tailwind CSS v3.x and the latest v4.x features, including modern CSS-variable-based configurations.

How does it handle dark mode?

It uses semantic color tokens like 'bg-card' and 'text-foreground' instead of hardcoded hex values, allowing components to automatically adapt to system themes.

What kind of components are included?

It includes patterns for section containers, feature grids, pricing cards, navigation headers, footers, and complex form states with validation UI.

Can I use these patterns for mobile-first development?

Absolutely. The skill enforces a mobile-first approach where base styles are applied to mobile by default, with larger screens handled via responsive prefixes.

Tailwind UI Patterns & Components

Name: Tailwind UI Patterns & Components
Author: evolv3ai

byevolv3ai

0•

Herramientas de Diseño

Generates production-ready, accessible, and responsive Tailwind CSS components using industry-standard design patterns.

This skill empowers Claude to implement professional-grade UI components using Tailwind CSS v3 and v4. It provides a standardized library of patterns for responsive layouts, navigation, forms, and typography, all adhering to a mobile-first philosophy and supporting dark mode via semantic tokens. By enforcing consistent spacing scales and design best practices, it eliminates design drift and ensures that AI-generated interfaces are robust, accessible, and ready for production environments.

Características Principales

01Dark mode support via semantic color tokens and theme-aware classes.

02Advanced layout systems including auto-fit grids and masonry styles.

03Mobile-first responsive design logic using standard Tailwind breakpoints.

04Standardized spacing scales and typography patterns to prevent design drift.

05Production-ready component patterns for layouts, cards, and navigation.

060 GitHub stars

Casos de Uso

01Building high-fidelity landing pages and marketing sites from scratch.

02Rapidly prototyping accessible forms and interactive UI elements.

03Refactoring legacy CSS to follow modern Tailwind CSS v4 standards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive tailwind-patterns

For use in Claude.ai and ChatGPT

Download Skill