tailwind-modern

Guide Tailwind v4 migrations with CSS-first @theme and @utility patterns.

102|4|Updated Apr 15, 2009

Search Tags:#frontend #css #migration #tailwind #tailwindcss #design-tokens #utility-classes

Ready to run

npx skills add https://github.com/mikker/dotfiles --skill tailwind-modern

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-modern
Source: https://github.com/mikker/dotfiles/tree/main/agents.symlink/skills/tailwind-modern
Command: npx skills add https://github.com/mikker/dotfiles --skill tailwind-modern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend teams align on Tailwind v4 patterns, accelerating migrations from Tailwind v3 and reducing drift toward older conventions.

Core Features & Use Cases

Guidance on adopting Tailwind v4 defaults, CSS-first theming, and token-based design.
Migration strategies for tokens, config, plugins, and build tooling across major stacks (React, Vue, Svelte).
Use Case: when refactoring a large project, apply these guidelines to rewrite class usage, configurations, and utilities to the v4 paradigm.

Quick Start

Review a project and convert legacy Tailwind 3 configurations and syntax to Tailwind v4-compliant patterns.

Frequently Asked Questions about tailwind-modern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I migrate from Tailwind v3 to v4?▼

Migrating from Tailwind v3 to v4 involves converting legacy configurations to CSS-first theming using @theme and @utility directives, modernizing token design, and updating plugin setups across React, Vue, and Svelte.

What are the core Tailwind v4 patterns for modern CSS?▼

Tailwind v4 patterns enforce CSS-first practices by utilizing @theme for token-based design and @utility for custom utilities, actively discouraging deprecated v3 configurations to ensure scalable frontend styling.

Does Tailwind v4 migration support Vue and Svelte frameworks?▼

Tailwind v4 migration supports major stacks including React, Vue, and Svelte. It provides targeted strategies for updating build tooling, configurations, and utility classes across these frontend frameworks.

How to modernize Tailwind config and design tokens?▼

Modernize Tailwind config and design tokens by transitioning to CSS-first theming with the @theme directive, replacing legacy JavaScript configurations with scalable, token-based design architectures.

Why should I avoid deprecated Tailwind v3 patterns?▼

Avoid deprecated Tailwind v3 patterns to prevent drift toward older conventions and ensure safe, scalable migrations. Adopting v4 defaults and CSS-first practices aligns frontend teams on modern styling.

What is the best way to handle Tailwind plugin setups during migration?▼

The best way to handle Tailwind plugin setups during migration is to define the migration scope clearly, ensuring plugins are updated alongside token design and config modernization to match v4 paradigms.