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

0•

Design Tools

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.

Key Features

01Support for modern directives including @utility, @variant, and @custom-variant

02Expertise in CSS-first configuration and @theme variable namespaces

030 GitHub stars

04Comprehensive migration guidance for moving from Tailwind v3 to v4

05Implementation of new functional APIs like --alpha() and --spacing()

06Validation of v4-specific syntax for arbitrary values and important modifiers

Use Cases

01Developing complex design systems using native CSS variables and custom v4 variants

02Refactoring legacy tailwind.config.js files into modern CSS-first @theme blocks

03Automating the migration process using official upgrade tools and breaking change checks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents tailwindcss-v4

For use in Claude.ai and ChatGPT

Download Skill