# Tailwind 4

Tailwind CSS 4 patterns and best practices.

- Repository: https://github.com/Gentleman-Programming/Gentleman-Skills (661 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-03-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Gentleman-Programming/Gentleman-Skills --skill tailwind-4 -g -a claude-code -y`
Codex: `npx skills add Gentleman-Programming/Gentleman-Skills --skill tailwind-4 -g -a codex -y`
Cursor: `npx skills add Gentleman-Programming/Gentleman-Skills --skill tailwind-4 -g -a cursor -y`
Gemini CLI: `npx skills add Gentleman-Programming/Gentleman-Skills --skill tailwind-4 -g -a gemini-cli -y`

## Description

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

## Styling Decision Tree

```
Tailwind class exists?  → className="..."
Dynamic value?          → style={{ width: `${x}%` }}
Conditional styles?     → cn("base", condition && "variant")
Static only?            → className="..." (no cn() needed)
Library can't use class?→ style prop with var() constants
```

## Critical Rules

### Never Use var() in className

```typescript
// ❌ NEVER: var() in className
<div className="bg-[var(--color-primary)]" />
<div className="text-[var(--text-color)]" />

// ✅ ALWAYS: Use Tailwind semantic classes
<div className="bg-primary" />
<div className="text-slate-400" />
```

### Never Use Hex Colors

```typescript
// ❌ NEVER: Hex colors in className
<p className="text-[#ffffff]" />
<div className="bg-[#1e293b]" />

// ✅ ALWAYS: Use Tailwind color classes
<p className="text-white" />
<div className="bg-slate-800" />
```

## The cn() Utility

```typescript
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

### When to Use cn()

```typescript
// ✅ Conditional classes
<div className={cn("base-class", isActive && "active-class")} />

// ✅ Merging with potential conflicts
<button className={cn("px-4 py-2", className)} />  // className might override

// ✅ Multiple conditions
<div className={cn(
  "rounded-lg border",
  variant === "primary" && "bg-blue-500 text-white",
  variant === "secondary" && "bg-gray-200 text-gray-800",
  disabled && "opacity-50 cursor-not-allowed"
)} />
```

### When NOT to Use cn()

```typescript
// ❌ Static classes - unnecessary wrapper
<div className={cn("flex items-center gap-2")} />

// ✅ Just use className directly
<div className="flex items-center gap-2" />
```

## Style Constants for Charts/Libraries

When libraries don't accept className (like Recharts):

The rest: https://github.com/Gentleman-Programming/Gentleman-Skills/blob/HEAD/curated/tailwind-4/SKILL.md