Does it support the new v4 gradient syntax?

Absolutely. It ensures you use the correct bg-linear-*, bg-radial-*, and bg-conic-* utilities instead of deprecated v3 gradient syntaxes.

Why does this skill discourage the use of @apply?

In Tailwind v4, the focus has shifted toward CSS variables and framework-level components; this skill helps you leverage @theme blocks and native CSS features for a cleaner configuration.

How does it handle component variants?

It utilizes the tailwind-variants (tv) library to provide type-safe, performant component styling with native support for slots, compound variants, and automatic class conflict resolution.

Does this skill support Tailwind CSS v3?

This skill is specifically optimized for Tailwind CSS v4.1+ and will recommend migrating older v3 utilities to their modern v4 equivalents for better performance and maintainability.

Can it help with mobile-first responsive design?

Yes, it strictly enforces mobile-first principles, ensuring that default classes apply to all sizes and breakpoint prefixes are only used for larger screen overrides.

Tailwind CSS v4 & Components

Name: Tailwind CSS v4 & Components
Author: sablier-labs

bysablier-labs

•

디자인 도구

Styles modern web interfaces using Tailwind CSS v4's CSS-first configuration and type-safe component variants.

소개

This skill transforms Claude into an expert Tailwind CSS v4 assistant, specializing in the transition from v3 and the implementation of type-safe styling using tailwind-variants. It enforces modern best practices such as CSS-only configuration, mobile-first responsive design, and the use of the latest v4 utility syntax while avoiding deprecated patterns like @apply or old gradient formats. Whether you are building complex multi-part components with the Slots API or refactoring legacy Tailwind code, this skill ensures your frontend is performant, maintainable, and strictly adheres to the latest framework standards.

주요 기능

Full Tailwind CSS v4.1+ compliance with automated detection of deprecated utilities
Type-safe component styling using tailwind-variants (tv) and the Slots API
Optimized layout implementation using modern primitives like size-* and min-h-dvh
Correct application of v4 gradient syntax including bg-linear, bg-radial, and bg-conic
5 GitHub stars
Expert guidance on CSS-first configuration via @theme and @utility blocks

사용 사례

Refactoring global CSS files to use v4 CSS variables and the --spacing() function for dynamic layouts
Creating highly customizable, type-safe UI libraries with complex component variants and composition
Migrating a project from Tailwind CSS v3 to v4 by identifying and replacing breaking changes

소개

주요 기능

Full Tailwind CSS v4.1+ compliance with automated detection of deprecated utilities
Type-safe component styling using tailwind-variants (tv) and the Slots API
Optimized layout implementation using modern primitives like size-* and min-h-dvh
Correct application of v4 gradient syntax including bg-linear, bg-radial, and bg-conic
5 GitHub stars
Expert guidance on CSS-first configuration via @theme and @utility blocks

사용 사례

Refactoring global CSS files to use v4 CSS variables and the --spacing() function for dynamic layouts
Creating highly customizable, type-safe UI libraries with complex component variants and composition
Migrating a project from Tailwind CSS v3 to v4 by identifying and replacing breaking changes