Does this skill support the latest Tailwind v4 features?

Yes, it includes guidelines for Tailwind v4 changes, including CSS-first configuration, the @theme directive, and new line-height syntax.

How does this skill handle Tailwind class conflicts?

It promotes the standard pattern of using 'clsx' and 'tw-merge' combined in a 'cn()' helper to resolve utility class conflicts effectively.

Can this skill help with web accessibility (a11y)?

Absolutely. It provides specific rules for maintainable contrast ratios, focus-visible states, and forced-colors variants for high-contrast modes.

When should I use @apply according to these guidelines?

The guidelines recommend using @apply only in the base layer for global resets or third-party styles; it should generally be avoided inside components to preserve the utility-first benefit.

Tailwind CSS Guidelines

Name: Tailwind CSS Guidelines
Author: peixotorms

bypeixotorms

0•

디자인 도구

Provides standardized patterns and best practices for writing, reviewing, and refactoring utility-first Tailwind CSS code.

This skill equips Claude with foundational knowledge for modern Tailwind CSS development, emphasizing a utility-first methodology over custom CSS. It covers advanced class composition using clsx and tw-merge, mobile-first responsive design, and accessible dark mode implementations. Developers can rely on this skill to maintain design consistency through standardized spacing scales, typography, and color systems while staying current with Tailwind v4 features like CSS-first configuration and container queries.

주요 기능

01Supports modern Tailwind v4 CSS-first configuration and @theme directives

02Guides accessible dark mode implementation with semantic color tokens

03Provides standardized typography, spacing, and border configurations

04Enforces utility-first styling patterns and efficient class composition

05Implements mobile-first responsive design and container query patterns

060 GitHub stars

사용 사례

01Refactoring legacy CSS or inline styles into clean, maintainable Tailwind components

02Implementing consistent design systems with unified spacing and accessible color scales

03Building complex, responsive UI components that adapt across various screen sizes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peixotorms/odinlayer-skills tailwind-guidelines

For use in Claude.ai and ChatGPT

Download Skill