tailwindv4
OfficialMigrate to Tailwind v4 with CSS-first theming.
Authornthplusio
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Upgrading Tailwind projects from v3 to v4 and adopting a CSS-first configuration can be error-prone and time-consuming. This Skill provides structured guidance, migration steps, and reference material to streamline the upgrade for developers and design teams.
Core Features & Use Cases
- Migration guidance: Step-by-step procedures to move from v3 to v4, update dependencies, and adapt configuration files.
- CSS-first token strategy: Demonstrates using the @theme block and CSS variables to manage colors, typography, and spacing with OKLCH colors.
- Reference material: Access to migration guides, syntax references, and OKLCH color documentation to support ongoing maintenance.
Quick Start
Begin by installing Tailwind CSS v4, then migrate your CSS to use the @theme block and the new v4 syntax. Refer to references/v4-syntax.md and references/migration-guide.md for detailed steps and examples.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: tailwindv4 Download link: https://github.com/nthplusio/functional-claude/archive/main.zip#tailwindv4 Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.