Does this skill support dark mode automatically?

Yes, all patterns utilize semantic tokens like 'bg-background' and 'text-foreground' which adapt automatically to the user's theme.

Are the components mobile-friendly?

Absolutely. Every pattern follows a mobile-first approach, using base classes for mobile and responsive prefixes for larger screen sizes.

What versions of Tailwind CSS are supported?

These patterns are fully compatible with both Tailwind CSS v3.x and the latest v4.x versions.

Can I use these patterns for complex layouts like Masonry?

Yes, the skill includes specialized grid patterns including Auto-Fit, Auto-Fill, and CSS column-based Masonry layouts.

How does this help with design consistency?

It enforces a strict spacing scale and typography system, preventing the 'design drift' that occurs when using random pixel values.

Tailwind CSS Design Patterns

Name: Tailwind CSS Design Patterns
Author: piotroq

bypiotroq

0•

设计工具

Implements production-ready Tailwind CSS patterns for responsive layouts, UI components, and theme-aware design systems.

This skill provides a comprehensive library of Tailwind CSS best practices and component patterns designed for production environments. It enables Claude to generate consistent, mobile-first interfaces using a standardized spacing scale, typography presets, and semantic color tokens that support both light and dark modes. Whether building complex dashboard grids, accessible forms, or sticky navigation bars, this skill ensures that generated code follows industry-standard utility patterns while avoiding common pitfalls like hardcoded colors or inconsistent spacing.

主要功能

01Ready-to-use component templates for headers, footers, forms, and cards.

02Standardized spacing scale and typography presets to ensure design consistency.

03Library of responsive layout patterns including Flexbox, Grid, and Masonry.

040 GitHub stars

05Mobile-first breakpoint system for seamless cross-device compatibility.

06Semantic color tokens for automatic, robust light and dark mode support.

使用场景

01Building accessible and consistent UI components like pricing cards and navigation menus.

02Rapidly prototyping landing pages with pre-defined responsive sections.

03Refactoring legacy CSS into standardized, theme-aware Tailwind utility classes.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com tailwind-patterns

For use in Claude.ai and ChatGPT

主要功能

01Ready-to-use component templates for headers, footers, forms, and cards.

02Standardized spacing scale and typography presets to ensure design consistency.

03Library of responsive layout patterns including Flexbox, Grid, and Masonry.

040 GitHub stars

05Mobile-first breakpoint system for seamless cross-device compatibility.

06Semantic color tokens for automatic, robust light and dark mode support.

使用场景

01Building accessible and consistent UI components like pricing cards and navigation menus.

02Rapidly prototyping landing pages with pre-defined responsive sections.

03Refactoring legacy CSS into standardized, theme-aware Tailwind utility classes.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com tailwind-patterns

For use in Claude.ai and ChatGPT