Are the layouts mobile-first?

Yes, all patterns follow a mobile-first philosophy, where base classes target mobile devices and responsive prefixes are added for larger breakpoints.

Can I use these patterns in any framework?

While the examples are shown in TSX, the utility classes are framework-agnostic and work perfectly with React, Vue, Svelte, or vanilla HTML/CSS projects.

Does this skill support Tailwind CSS v4?

Yes, the patterns are designed to be fully compatible with both Tailwind CSS v3.x and the newer v4.x architecture.

How does the skill handle dark mode?

The skill utilizes semantic color tokens like 'bg-background' and 'text-foreground' rather than hardcoded hex values, allowing components to adapt automatically to theme changes.

Tailwind UI Patterns

Name: Tailwind UI Patterns
Author: jezweb

byjezweb

•

169

•

设计工具

Generates production-grade, responsive, and accessible Tailwind CSS components using standardized design patterns.

Tailwind UI Patterns is a specialized skill that equips Claude with a robust library of battle-tested CSS patterns for modern web development. It enforces industry best practices such as mobile-first responsiveness, a consistent 4-unit spacing scale, and semantic color tokens that provide native dark mode support. By using this skill, developers can quickly scaffold everything from complex navigation and data-entry forms to hero sections and pricing cards, ensuring the resulting code is clean, maintainable, and compatible with both Tailwind CSS v3 and v4.

主要功能

01169 GitHub stars

02Automatic dark mode support using semantic color tokens

03Production-ready patterns for cards, buttons, forms, and navigation

04Standardized spacing and typography scales to prevent design drift

05Mobile-first responsive system with standardized breakpoints

06Built-in layout templates for hero sections and feature grids

使用场景

01Building responsive landing pages and marketing sites from scratch

02Implementing consistent UI components for React and Next.js applications

03Refactoring existing styles into clean, semantic Tailwind utility classes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jezweb/claude-skills tailwind-patterns

For use in Claude.ai and ChatGPT

Download Skill