tailwind-4

Guide Tailwind-4 UI patterns with semantic classes and cn() for conditional styling.

Updated Jul 10, 2025

Search Tags:#theming #css #styling #responsive #tailwind #design-patterns #cn

Ready to run

npx skills add https://github.com/SoyJuanMa/Nvim_Back --skill tailwind-4-soyjuanma

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/SoyJuanMa/Nvim_Back/tree/main/opencode/skill/tailwind-4
Command: npx skills add https://github.com/SoyJuanMa/Nvim_Back --skill tailwind-4-soyjuanma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS 4 patterns and best practices to help teams style UI consistently, avoiding pitfalls like inline var() usage and non-semantic color choices.

Core Features & Use Cases

Decision-tree guidance for when to use className, style props, and cn() for conditional styling.
Rules for semantic colors, avoiding hex values in className, and leveraging responsive and dark-mode patterns.
Practical examples applying Tailwind 4 patterns to React components and design systems.

Quick Start

Refactor components to replace var() and hex values with semantic Tailwind classes and use cn() for conditional styling.

Frequently Asked Questions about tailwind-4

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

FAQPage Schema

How do I use Tailwind 4 with the cn() utility for conditional styling?▼

To use Tailwind 4 with cn() for conditional styling, apply cn() to merge semantic classes based on component state, ensuring consistent UI patterns while avoiding inline var() or hex color values in className.

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

You should avoid var() and hex colors in Tailwind 4 className strings to enforce semantic color choices, maintain design system consistency, and prevent non-semantic styling pitfalls in frontend components.

When do I use style props instead of arbitrary values in Tailwind CSS?▼

Use style props instead of arbitrary values in Tailwind CSS for dynamic values that cannot be predefined, while relying on semantic className patterns for responsive and dark-mode states.

What is the best way to structure responsive and dark-mode states in Tailwind 4?▼

The best way to structure responsive and dark-mode states in Tailwind 4 is by leveraging semantic classes and decision-tree guidance to apply consistent UI patterns across React components.