skills.rest
r-senchuk
r-senchukCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-theming

Add, extract, and debug Tailwind CSS v4 design tokens using CSS-first @theme configuration.

Updated Mar 29, 2026
Search Tags:#theming#debugging#next.js#design tokens#tailwind css#utility classes#css-first
One-click install
npx skills add https://github.com/r-senchuk/agentskills --skill tailwind-v4-theming-r-senchuk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-theming
Source: https://github.com/r-senchuk/agentskills/tree/main/.agents/skills/tailwind-v4-theming
Command: npx skills add https://github.com/r-senchuk/agentskills --skill tailwind-v4-theming-r-senchuk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Tailwind CSS v4 replaces the JavaScript config file with a CSS-first @theme {} block, which breaks old habits and causes confusing issues like tokens not generating utility classes or not appearing on :root. This Skill provides the correct v4 workflow for managing design tokens, extracting repeated utility patterns, and debugging broken classes in globals.css. ## Core Features & Use Cases - Token Authoring: Add color, font, and spacing tokens inside @theme {} with correct prefixes (--color-*, --font-*, --spacing-*) so utilities like bg-brand-primary generate automatically. - Component Extraction: Extract repeated multi-class patterns into @layer components with @apply when a pattern appears 3+ times across files. - Debugging Workflow: Diagnose why a token is missing from :root in DevTools, why a utility class is not applying, or why v3 directives break the build. - Use Case: A developer needs a new accent-terracotta color for a Next.js 15 site. The Skill adds --color-accent-terracotta: #C4704A; to @theme {} in globals.css, making bg-accent-terracotta and text-accent-terracotta available instantly with no rebuild. ## Quick Start Add a new terracotta accent color token to my Tailwind v4 theme and show me which utility classes it generates.

Frequently Asked Questions about tailwind-v4-theming

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

FAQPage Schema
How do I add a custom color token in Tailwind CSS v4?▼

Add a custom property inside the `@theme {}` block in your CSS file using the `--color-<name>` prefix, for example `--color-error: #C0392B;`. Tailwind v4 automatically generates utilities like `bg-error`, `text-error`, and `border-error` with no rebuild needed in dev.

How do I extract repeated Tailwind utility patterns into a component class?▼

Use `@layer components` below the `@theme {}` block and define a named class with `@apply`, such as `.btn-primary { @apply rounded-md bg-brand-primary px-6 py-3; }`. Only extract a pattern when it appears three or more times across different files.

Does Tailwind CSS v4 still use tailwind.config.ts?▼

No. Tailwind v4 uses CSS-first configuration where all design tokens live in the `@theme {}` block of your CSS file. Creating or editing `tailwind.config.ts` is explicitly discouraged, and v3 directives like `@tailwind base` are replaced by `@import "tailwindcss"`.

Why is my Tailwind v4 custom utility class not working?▼

Check that the token is declared inside `@theme {}` with the correct prefix and that its name exactly matches the class suffix. Verify `@import "tailwindcss"` is the first line of the file, then inspect `:root` in browser DevTools to confirm the token appears as a CSS custom property.

Can I use Tailwind's default color palette with a custom v4 theme?▼

This workflow prohibits using built-in palette classes like `bg-blue-500` in favor of semantically named custom tokens such as `accent-blue`. It also forbids the `theme()` function; reference tokens with `var(--color-*)` instead.

Related Skills

Explore More Software Engineering Skills→
PolicyEnginePolicyEngine

policyengine-ui-kit-consumer

Integrate the PolicyEngine UI Kit into frontend projects with Tailwind and PostCSS configuration.

Official
Intermediate
erikhazzarderikhazzard
1

design__building-frontend

Design frontend architectures with BEM, design tokens, and accessible markup.

Community
Advanced
phazurlabsphazurlabs
35

UI Visual Design System

Define visual design systems for typography, color, spacing, and accessibility.

Community
Advanced
secondskysecondsky
204

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui using CSS variables and dark mode.

Community
Advanced