tailwind-4

Enforce safe Tailwind class composition and theme usage in React/TypeScript.

19|2|Updated Apr 28, 2026

Search Tags:#react #tailwind css #theme tokens #class composition #cn utility #styling rules

Ready to run

npx skills add https://github.com/CamiloAndresGTRUniandes/lucy-ai --skill tailwind-4-camiloandresgtruniandes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/CamiloAndresGTRUniandes/lucy-ai/tree/main/skills/tailwind-4
Command: npx skills add https://github.com/CamiloAndresGTRUniandes/lucy-ai --skill tailwind-4-camiloandresgtruniandes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves inconsistent or unsafe Tailwind usage that leads to broken theming, unreadable class logic, and styling bugs in React/TypeScript codebases.

Core Features & Use Cases

Enforces safe Tailwind patterns such as avoiding var() in className and banning hex colors to keep styling consistent with design tokens.
Standardizes class composition by using cn() (clsx + tailwind-merge) for conditional and conflicting utility merging.
Guides when to use style props for truly dynamic values or for component libraries that do not accept className (e.g., Recharts), plus a practical arbitrary-values escape hatch.

Quick Start

Use the tailwind-4 skill to refactor your component so it replaces var() and hex colors with proper Tailwind classes and applies cn() only where conditional or merge-prone classes are needed.

Frequently Asked Questions about tailwind-4

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

FAQPage Schema

How do I prevent broken theming when using dynamic Tailwind CSS classes in React?▼

Prevent broken theming by enforcing safe className composition in React, using semantic Tailwind classes instead of var() and hex colors to maintain consistent design tokens. This stops styling bugs and unreadable class logic.

What is the best way to merge conditional Tailwind CSS utility classes?▼

The best way to merge conditional Tailwind CSS utility classes is using the cn() utility, which combines clsx and tailwind-merge to safely handle conditional and conflicting utility merging without style collisions.

How do I style React components that do not accept className props?▼

Style React components that do not accept className props by using style props for dynamic values or library-specific properties. This provides an escape hatch for third-party libraries like Recharts while keeping Tailwind tokens consistent.

Why should I avoid hex colors and var() in Tailwind CSS className strings?▼

Avoid hex colors and var() in Tailwind CSS className strings because they bypass theme tokens, leading to inconsistent theming and brittle styling. Using semantic Tailwind classes ensures styles remain manageable and aligned with your design system.

Does this Tailwind CSS styling approach work with TypeScript UI development?▼

Yes, this safe Tailwind CSS styling approach applies directly to React and TypeScript UI development, ensuring dynamically chosen utilities, merged classes, and third-party library integrations remain type-safe and theme-compliant.

When should I use arbitrary values instead of semantic Tailwind classes?▼

Use arbitrary values as an escape hatch when semantic Tailwind classes cannot achieve a truly dynamic value requirement, applying them via style props to maintain safe composition patterns and avoid brittle className logic.