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.
Tailwind-4 teaches Tailwind CSS 4 best practices, including when to use cn(), semantic classes, and dynamic styling patterns.
AI-generated summary based on this skill's SKILL.md
Install
Gentleman-Programming/Gentleman-Skills/tailwind-4
git clone https://github.com/Gentleman-Programming/Gentleman-Skills
cp -r Gentleman-Skills/curated/tailwind-4 ~/.claude/skills/tailwind-4npx skillfed install Gentleman-Programming/Gentleman-Skills/tailwind-4Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are Tailwind CSS 4 best practices?
Tailwind-4 emphasizes using semantic utility classes for all styling needs rather than custom CSS or var() functions. Best practices include leveraging cn() for conditional class composition, applying theme variables directly through Tailwind's color and spacing utilities, and using the style prop only for truly dynamic values that can't be expressed as class names. Always prefer utility classes for responsive design, dark mode, and interactive states like hover and focus.
How to use cn() function tailwind for conditional classes?
Tailwind-4 recommends cn() (from clsx or twMerge) to merge and conditionally apply Tailwind classes. Use cn() when you need to combine base classes with conditional ones—for example, cn('px-4 py-2', isActive && 'bg-blue-500', disabled && 'opacity-50'). This ensures proper class merging and prevents conflicts. cn() is especially useful in component libraries and when styling props depend on state or component variants.
Should I use var() or semantic Tailwind classes for colors?
Tailwind-4 strongly favors semantic Tailwind color classes over var() or hex values. Instead of var(--primary-color) or hex codes, use Tailwind's theme colors like bg-blue-500, text-slate-700, or border-emerald-600. This approach keeps styling consistent, enables dark mode automatically, and maintains the single source of truth in your Tailwind config. Reserve var() only for values that truly fall outside Tailwind's design system.
How do I style dynamic values and library components correctly?
Tailwind-4 handles dynamic values by using the style prop for values that can't be expressed as class names—such as calculated widths or API-driven colors. For library components that don't accept className, pass styling through the style prop or use Tailwind's arbitrary value syntax as an escape hatch. Always exhaust semantic utilities first; use arbitrary values and inline styles only when necessary for truly dynamic or non-standard values.
What's the difference between cn() and className in Tailwind?
Tailwind-4 distinguishes between cn() and className: className is a prop that accepts a string of classes, while cn() is a utility function that intelligently merges multiple class strings, handles conditionals, and resolves conflicts using twMerge. Use className for static class strings and cn() when you need to combine base classes with conditional or variant classes. cn() prevents duplicate or conflicting utilities from breaking your styles.
How do I implement responsive and dark mode styling in Tailwind?
Tailwind-4 uses responsive prefixes (sm:, md:, lg:) and dark: prefix for dark mode. Apply responsive classes directly to elements—for example, grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4. For dark mode, use dark:bg-slate-900 dark:text-white. Both features work automatically when configured in tailwind.config.js. Combine them for full control: dark:md:text-lg. Always design mobile-first by default, then layer larger breakpoints on top.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```typescript import { clsx } from "clsx"; import { twMerge }
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
curated/tailwind-4/SKILL.md