skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

kb-tailwind-v4

Standardize Tailwind CSS v4 utility generation for Next.js CSS-first @theme token systems.

Updated May 19, 2026
Search Tags:#migration#next.js#tailwindcss#tailwind v4#css-first theming#token system#build safety
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-tailwind-v4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kb-tailwind-v4
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/kb-tailwind-v4
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-tailwind-v4

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about kb-tailwind-v4

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

FAQPage Schema
How do I migrate Tailwind CSS classes from v3 to v4?▼

Use @source directives in globals.css to control class-string scanning and prevent Oxide or Turbopack crashes when markdown contains CSS examples. Correct @source usage ensures build-safe scanning across the Next.js project.

How does CSS-first theming work with Tailwind v4?▼

CSS-first theming in Tailwind v4 uses a two-layer token system in globals.css with theme-scoped variables and @theme inline utility mappings. This maps tokens across .light, .dark, and .midnight scopes to generate correct utilities.

Does Tailwind v4 work with a Next.js CSS-first token system?▼

Yes, Tailwind v4 works with a Next.js CSS-first token system by standardizing utility generation against @theme inline mappings. It ensures correct variable-based colors and dynamic spacing conversions without breaking the existing theme.

Why does Turbopack crash when scanning markdown for Tailwind v4 classes?▼

Turbopack crashes during Tailwind v4 class scanning because markdown files containing CSS examples trigger invalid parsing. Applying correct @source directives restricts the scanner to relevant files and prevents these build failures.

Related Skills

Explore More Software Engineering Skills→
moughamirmoughamir

tailwindcss-fundamentals-v4

Migrate Tailwind CSS v3 projects to v4's CSS-first @theme workflow.

Community
Intermediate
laravellaravel
3.6k

tailwindcss-development

Apply Tailwind CSS v4 utilities for styling and responsive layouts.

Official
Intermediate
david-nossebrodavid-nossebro

tailwindcss

Review Tailwind CSS setup and refactor UI utility classes safely.

Community
Intermediate
gouravsingh311gouravsingh311

tailwind-v4

Configure Tailwind v4 design tokens using CSS-first @theme directives.

Community
Advanced