---
id: Gentleman-Programming/Gentleman-Skills/tailwind-4
version: "b37f6614"
license: MIT
install: manual
updated: 2026-03-28
---
# tailwind-4 — Tailwind-4 guides you through Tailwind CSS 4 conventions and patterns for modern styling. Learn when to apply cn() for conditional classes, leverage semantic color and spacing utilities, and handle dynamic values with the style prop. The skill covers flexbox, grid, responsive design, dark mode, and proper handling of library integrations that don't accept className.
Publisher: Gentleman-Programming · Stars: 604 · Updated: 2026-03-28
Install (manual): `git clone https://github.com/Gentleman-Programming/Gentleman-Skills`
## SKILL.md
## 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
// ✅ ALWAYS: Use Tailwind semantic classes
```
### Never Use Hex Colors
```typescript
// ❌ NEVER: Hex colors in className
// ✅ ALWAYS: Use Tailwind color classes
```
## 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
// ✅ Merging with potential conflicts
// className might override
// ✅ Multiple conditions
```
### When NOT to Use cn()
```typescript
// ❌ Static classes - unnecessary wrapper
// ✅ Just use className directly
```
## Style Constants for Charts/Libraries
When libraries don't accept className (like Recharts):
```typescript
// ✅ Constants with var() - ONLY for library props
const CHART_COLORS = {
primary: "var(--color-primary)",
secondary: "var(--color-secondary)",
text: "var(--color-text)",
gridLine: "var(--color-border)",
};
// Usage with Recharts (can't use className)
```
## Dynamic Values
```typescript
// ✅ style prop for truly dynamic values
// ✅ CSS custom properties for theming
```
## Common Patterns
### Flexbox
```typescript
```
### Grid
```typescript
```
### Spacing
```typescript
// Padding
// All sides
// Horizontal, vertical
// Top, bottom
// Margin
// Center horizontally
```
### Typography
```typescript
```
### Borders & Shadows
```typescript
```
### States
```typescript
```
### Responsive
```typescript
```
### Dark Mode
```typescript
```
## Arbitrary Values (Escape Hatch)
```typescript
// ✅ OK for one-off values not in design system
// ❌ Don't use for colors - use theme instead
// NO
```
## Keywords
tailwind, css, styling, cn, utility classes, responsive
[View on SkillFed](https://skillfed.io/Gentleman-Programming/Gentleman-Skills/tailwind-4) · [View on GitHub](https://github.com/Gentleman-Programming/Gentleman-Skills)