tailwind-4

Guide Tailwind CSS styling with cn(), semantic tokens, and responsive utilities.

1|Updated Jan 18, 2026

Search Tags:#css #styling #tailwind #design-tokens #design-systems #cn #conditional-classes

Ready to run

npx skills add https://github.com/valec3/AGENTS.md --skill tailwind-4-valec3

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/valec3/AGENTS.md/tree/main/REFERENCES/GentlemanProgramming/skill/tailwind-4
Command: npx skills add https://github.com/valec3/AGENTS.md --skill tailwind-4-valec3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a practical guide to applying Tailwind CSS patterns and best practices, helping developers achieve consistent, maintainable styling across components.

Core Features & Use Cases

Pattern guidance: rules for using cn(), theme variables, and avoiding var() in className to keep styles predictable.
Best-practice rules: recommendations to avoid hex colors, favor semantic color tokens, and leverage responsive and dark mode utilities.
Use Case: design-system teams standardizing UI components across a Tailwind-based project.

Quick Start

Refactor a component's className usage to Tailwind-4 patterns: use cn() for conditional classes, avoid var() and hex colors by using semantic tokens, and apply responsive/dark-mode utilities where appropriate.

Frequently Asked Questions about tailwind-4

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

FAQPage Schema

How do I use cn() for conditional Tailwind classes in React components?▼

Avoid var() in className strings to keep styles predictable and maintainable. Instead, use Tailwind's semantic color tokens directly in utility classes to ensure consistent theming and prevent unexpected cascade issues across your design system.

Why should I use semantic color tokens instead of hex colors in Tailwind?▼

Use semantic color tokens instead of hex colors to maintain a consistent design system. This practice ensures predictable styling across components, leverages responsive and dark mode utilities automatically, and prevents hardcoding values that break theming consistency.

What's the best way to standardize Tailwind styling patterns across a design system?▼

Standardize Tailwind styling by enforcing rules like using cn() for conditional classes, avoiding var() in className, and preferring semantic color tokens. This consolidates best practices into a reusable guide for consistent utility usage across frontend teams.

Does this Tailwind CSS pattern guide work for teams maintaining existing components?▼

Yes, you can refactor a component's className usage to these Tailwind patterns by applying cn() for conditional classes, replacing var() and hex colors with semantic tokens, and applying responsive and dark-mode utilities where appropriate.

When do I need to apply responsive and dark mode utilities in Tailwind?▼

Apply responsive and dark mode utilities whenever components need to adapt to different screen sizes or color schemes. Leveraging these utilities alongside semantic color tokens ensures predictable, maintainable styling across your Tailwind-based project.