Tailwind 4

Modern Tailwind CSS 4 patterns with semantic classes and best practices

✨ The solution you've been looking for

Verified

Tested and verified by our team

12565 Stars

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className).

tailwind css frontend styling react typescript ui responsive

Repository

See It In Action

Interactive preview & real-world examples

Live Demo

AI Conversation Simulator

See how users interact with this skill

User Prompt

Create a button component with conditional styling for different variants and states

Skill Processing

Analyzing request...

Agent Response

Clean Tailwind classes with proper conditional logic using cn() utility, avoiding var() in className

Quick Start (3 Steps)

Get up and running in minutes

Install

claude-code skill install tailwind-4

claude-code skill install tailwind-4

Config

First Trigger

@tailwind-4 help

Commands

Command	Description	Required Args
@tailwind-4 conditional-component-styling	Apply dynamic styles based on component state or props using the cn() utility	None
@tailwind-4 chart-library-integration	Style third-party libraries that don't accept className props using CSS variables	None
@tailwind-4 responsive-layout-design	Build responsive layouts using Tailwind's mobile-first approach and breakpoint system	None

Typical Use Cases

Conditional Component Styling

Apply dynamic styles based on component state or props using the cn() utility

Chart Library Integration

Style third-party libraries that don't accept className props using CSS variables

Responsive Layout Design

Build responsive layouts using Tailwind's mobile-first approach and breakpoint system

Overview

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

1// ❌ NEVER: var() in className
2<div className="bg-[var(--color-primary)]" />
3<div className="text-[var(--text-color)]" />
4
5// ✅ ALWAYS: Use Tailwind semantic classes
6<div className="bg-primary" />
7<div className="text-slate-400" />

Never Use Hex Colors

1// ❌ NEVER: Hex colors in className
2<p className="text-[#ffffff]" />
3<div className="bg-[#1e293b]" />
4
5// ✅ ALWAYS: Use Tailwind color classes
6<p className="text-white" />
7<div className="bg-slate-800" />

The cn() Utility

1import { clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

When to Use cn()

 1// ✅ Conditional classes
 2<div className={cn("base-class", isActive && "active-class")} />
 3
 4// ✅ Merging with potential conflicts
 5<button className={cn("px-4 py-2", className)} />  // className might override
 6
 7// ✅ Multiple conditions
 8<div className={cn(
 9  "rounded-lg border",
10  variant === "primary" && "bg-blue-500 text-white",
11  variant === "secondary" && "bg-gray-200 text-gray-800",
12  disabled && "opacity-50 cursor-not-allowed"
13)} />

When NOT to Use cn()

1// ❌ Static classes - unnecessary wrapper
2<div className={cn("flex items-center gap-2")} />
3
4// ✅ Just use className directly
5<div className="flex items-center gap-2" />

Style Constants for Charts/Libraries

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

 1// ✅ Constants with var() - ONLY for library props
 2const CHART_COLORS = {
 3  primary: "var(--color-primary)",
 4  secondary: "var(--color-secondary)",
 5  text: "var(--color-text)",
 6  gridLine: "var(--color-border)",
 7};
 8
 9// Usage with Recharts (can't use className)
10<XAxis tick={{ fill: CHART_COLORS.text }} />
11<CartesianGrid stroke={CHART_COLORS.gridLine} />

Dynamic Values

1// ✅ style prop for truly dynamic values
2<div style={{ width: `${percentage}%` }} />
3<div style={{ opacity: isVisible ? 1 : 0 }} />
4
5// ✅ CSS custom properties for theming
6<div style={{ "--progress": `${value}%` } as React.CSSProperties} />

Common Patterns

Flexbox

1<div className="flex items-center justify-between gap-4" />
2<div className="flex flex-col gap-2" />
3<div className="inline-flex items-center" />

Grid

1<div className="grid grid-cols-3 gap-4" />
2<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" />

Spacing

1// Padding
2<div className="p-4" />           // All sides
3<div className="px-4 py-2" />     // Horizontal, vertical
4<div className="pt-4 pb-2" />     // Top, bottom
5
6// Margin
7<div className="m-4" />
8<div className="mx-auto" />       // Center horizontally
9<div className="mt-8 mb-4" />

Typography

1<h1 className="text-2xl font-bold text-white" />
2<p className="text-sm text-slate-400" />
3<span className="text-xs font-medium uppercase tracking-wide" />

Borders & Shadows

1<div className="rounded-lg border border-slate-700" />
2<div className="rounded-full shadow-lg" />
3<div className="ring-2 ring-blue-500 ring-offset-2" />

States

1<button className="hover:bg-blue-600 focus:ring-2 active:scale-95" />
2<input className="focus:border-blue-500 focus:outline-none" />
3<div className="group-hover:opacity-100" />

Responsive

1<div className="w-full md:w-1/2 lg:w-1/3" />
2<div className="hidden md:block" />
3<div className="text-sm md:text-base lg:text-lg" />

Dark Mode

1<div className="bg-white dark:bg-slate-900" />
2<p className="text-gray-900 dark:text-white" />

Arbitrary Values (Escape Hatch)

1// ✅ OK for one-off values not in design system
2<div className="w-[327px]" />
3<div className="top-[117px]" />
4<div className="grid-cols-[1fr_2fr_1fr]" />
5
6// ❌ Don't use for colors - use theme instead
7<div className="bg-[#1e293b]" />  // NO