Does this skill support container queries?

Yes, it leverages Tailwind v4’s built-in container query support, enabling @container and @cq variants without external plugins.

Does this skill support the old tailwind.config.js?

No, Tailwind v4 moves away from JS-based configuration in favor of a CSS-first approach using the @theme directive, which this skill helps implement.

Can it help migrate from Tailwind v3 to v4?

Yes, it is designed to automate the conversion of theme tokens and replace deprecated @tailwind directives with the new import syntax.

How does it handle custom utilities?

It utilizes the new @utility directive, allowing custom CSS classes to integrate seamlessly with Tailwind's native variant system.

Tailwind CSS v4 Architect

Name: Tailwind CSS v4 Architect
Author: hjemmesidekongen

byhjemmesidekongen

0•

디자인 도구

Automates Tailwind CSS v4 configuration and migration by implementing the new CSS-first theme engine and modern utility patterns.

This skill streamlines the transition to Tailwind CSS v4, moving away from traditional JavaScript-based configurations toward a performance-focused CSS-first approach. It automatically handles the conversion of theme tokens into CSS variables, manages migration from v3 by replacing legacy directives with modern imports, and enforces best practices for container queries and custom utilities. Whether you are building a new project or upgrading an existing one, this skill ensures your styling architecture remains clean, maintainable, and fully compliant with the latest Tailwind standards.

주요 기능

01Modern Layout Support: Configures built-in container queries and consistent dark mode strategies.

02Automated Migration: Replaces v3 @tailwind directives with modern @import syntax.

03Variable-Based Theming: Converts JS theme values into native CSS custom properties.

04Utility & Variant Management: Implements custom utilities and variants using native v4 directives.

05CSS-First Configuration: Migrates legacy JS config files to the new @theme block in CSS.

060 GitHub stars

사용 사례

01Defining design tokens and theme variables directly within the CSS layer.

02Implementing complex container queries and dark mode variants without external plugins.

03Migrating legacy Tailwind CSS v3 projects to the v4 CSS-first engine.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hjemmesidekongen/ai tailwind-v4

For use in Claude.ai and ChatGPT