What are the new arbitrary value and important modifier syntaxes?

Tailwind v4 uses bg-(--var) instead of bg-[--var] for variables, and moves the important modifier to the end of the class, such as bg-red-500!.

How does this skill assist with Tailwind v3 to v4 migrations?

The skill provides a detailed roadmap for breaking changes, helps identify renamed utilities like shadow-sm to shadow-xs, and guides you through using the npx @tailwindcss/upgrade tool.

Does this skill support the new @utility directive?

Yes, it provides the correct syntax for creating custom utilities that are automatically detected and processed by the Tailwind v4 engine.

What is the CSS-first configuration in Tailwind v4?

In v4, configuration moves from a JavaScript file to your CSS file using the @theme directive, allowing you to define design tokens directly as CSS variables.

Which browser versions are required for Tailwind v4?

Tailwind v4 targets modern browsers including Safari 16.4+, Chrome 111+, and Firefox 128+ to leverage modern CSS features.

Tailwind CSS v4 Support

Name: Tailwind CSS v4 Support
Author: fusengine

byfusengine

デザインツール

Streamlines Tailwind CSS v4 development with expert guidance on CSS-first configuration, modern directives, and version migration.

概要

This skill equips Claude with specialized knowledge of the Tailwind CSS v4.1 engine, focusing on the shift toward a CSS-first configuration model. It provides precise documentation and implementation patterns for the @theme directive, custom utility creation via @utility, and the new functional syntax for colors and spacing. Whether you are building a new design system or upgrading an existing project from v3, this skill ensures your code adheres to the latest performance standards and syntax requirements of modern Tailwind.

主な機能

Support for modern directives including @utility, @variant, and @custom-variant
Expertise in CSS-first configuration and @theme variable namespaces
0 GitHub stars
Comprehensive migration guidance for moving from Tailwind v3 to v4
Implementation of new functional APIs like --alpha() and --spacing()
Validation of v4-specific syntax for arbitrary values and important modifiers

ユースケース

Developing complex design systems using native CSS variables and custom v4 variants
Refactoring legacy tailwind.config.js files into modern CSS-first @theme blocks
Automating the migration process using official upgrade tools and breaking change checks

概要

主な機能

Support for modern directives including @utility, @variant, and @custom-variant
Expertise in CSS-first configuration and @theme variable namespaces
0 GitHub stars
Comprehensive migration guidance for moving from Tailwind v3 to v4
Implementation of new functional APIs like --alpha() and --spacing()
Validation of v4-specific syntax for arbitrary values and important modifiers

ユースケース

Developing complex design systems using native CSS variables and custom v4 variants
Refactoring legacy tailwind.config.js files into modern CSS-first @theme blocks
Automating the migration process using official upgrade tools and breaking change checks