Tailwind 4

A practical reference for Tailwind CSS 4 that lays out clear rules: never use var() in className, never use hex colors, and only reach for cn() when you actually have conditional logic or potential class conflicts. The decision tree at the top is genuinely helpful for figuring out whether you need className, style props, or the cn() utility. Also includes a smart pattern for chart libraries like Recharts that can't accept className, where you define color constants with var() for their props. The examples cover the usual suspects like flexbox, grid, and responsive design, but the real value is in the "never do this" sections that prevent common mistakes. Straightforward and opinionated in a good way.

skills.sh installs: 279
GitHub stars: 665
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add gentleman-programming/gentleman-skills --skill tailwind-4 --agent claude-code

Installs into .claude/skills of the current project.

Files

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

// ❌ 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

// ❌ 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

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

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

When to Use cn()

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

SKILL.md on GitHub

Details

Repository: github.com/gentleman-programming/gentleman-skills
Category: Frontend Development
First seen: Jun 3, 2026

More from gentleman-programming/gentleman-skills

All 13