What new CSS properties are supported?

It covers modern CSS features supported in v4 like subgrid, logical properties, text-balance, and field-sizing for auto-growing inputs.

Can this help me migrate from Tailwind v3?

Yes, the skill includes specific patterns and guidance for converting tailwind.config.js settings into v4's modern CSS variables.

Does it support the new container query features?

Absolutely. It provides specific patterns for @container usage and defining container-specific breakpoints like @md and @lg.

How does this skill handle Tailwind v4's configuration?

It focuses on the new CSS-based @theme directive, moving away from JavaScript-heavy configuration files for a more native CSS experience.

Tailwind CSS v4 Pro

Name: Tailwind CSS v4 Pro
Author: Naw3

byNaw3

0•

디자인 도구

Streamlines styling workflows using Tailwind CSS v4's CSS-first configuration and modern utility patterns.

This skill empowers Claude to efficiently implement and migrate to Tailwind CSS v4, leveraging the engine's new CSS-first architecture. It provides specialized knowledge for the @theme directive, native container queries, logical properties, and high-performance utilities like text-balance and field-sizing. Whether you're building modern UI components or upgrading from version 3, this skill ensures best practices for performance, accessibility, and maintainability in your frontend styling.

주요 기능

01Advanced utility patterns including subgrid, text-balance, and field-sizing

02Migration guidance for transitioning from Tailwind CSS v3 to v4

03Custom component styling with the new @utility directive

04CSS-first theme configuration using the @theme directive

05Native container query implementation for responsive component design

060 GitHub stars

사용 사례

01Modernizing legacy Tailwind CSS v3 projects to the v4 architecture

02Implementing design systems directly within CSS using custom properties

03Building complex, responsive UI components using native container queries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add naw3/skillsrepo tailwind-v4

For use in Claude.ai and ChatGPT

Download Skill