Skills
.Work. You
Rest

kb-tailwind-v4

Official

Write correct Tailwind v4 classes, fast.

Software Engineering#migration#next.js#tailwindcss#tailwind v4#css-first theming#token system#build safety
AuthorTimeKast
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents broken styling and build failures caused by Tailwind CSS v3-to-v4 syntax and scanning differences in this repo’s CSS-first setup.

Core Features & Use Cases

  • v3 → v4 class syntax fixes: Converts common v3 patterns to the correct v4 forms, especially for dynamic spacing and variable-based utilities.
  • Repo-specific CSS-first theming guidance: Teaches the two-layer token system using globals.css with theme-scoped variables and @theme inline utility mappings across .light, .dark, and .midnight.
  • Build-safe scanning rules: Explains how to use @source and @plugin directives correctly to avoid Oxide/Turbopack crashes when markdown contains CSS examples.

Quick Start

When you need to add new UI spacing or theme colors, apply the Tailwind v4 patterns from this Skill and update src/app/globals.css tokens or @theme inline mappings as necessary.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: kb-tailwind-v4
Download link: https://github.com/TimeKast/AgendaInteligente/archive/main.zip#kb-tailwind-v4

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.