tailwind-4_skill

Overview

This skill provides Tailwind CSS 4 patterns and best practices for styling React components, especially when using className, conditional variants, cn(), and CSS variables. It focuses on safe, maintainable choices for dynamic styling, third-party libraries, and theme-aware values. Follow these rules to avoid common pitfalls like embedding var() or hex colors in className and to keep styles predictable across your app.

How this skill works

It inspects your styling intent and recommends the correct technique: static classes use className directly, conditional or merged classes use the cn() utility, truly dynamic numeric values use the style prop, and library props that don't accept className use CSS custom properties (var()) in JavaScript constants. It enforces semantic Tailwind classes, forbids var() and hex values inside className, and suggests escape-hatch arbitrary values only for one-off layout needs.

When to use it

• Use className="..." for static, unchanging utility classes.
• Use cn(...) for conditional classes, merged className overrides, or multiple variants.
• Use style={{ ... }} for dynamic numeric values like width, opacity, or CSS custom properties set inline.
• Use var() values only in JS constants passed to libraries that don't accept className (charts, canvases).
• Use arbitrary values (w-[327px], top-[117px]) sparingly for one-off layout needs, not color.

Best practices

• Never place var() or hex colors inside className; use theme-aware Tailwind tokens (bg-primary, text-slate-400).
• Keep cn() for conditional logic and conflict-safe merging; avoid cn() for purely static class lists.
• Prefer Tailwind semantic color classes and design-system tokens for consistency and dark mode support.
• For truly dynamic dimensions or stateful CSS variables, use the style prop or inline CSS custom properties.
• Define chart/library color constants with var(--...) and pass them to library props, not into className.

Example use cases

• Conditional button variants: className={cn('px-4 py-2', isActive && 'bg-blue-500 text-white')}.
• Dynamic progress bar width: <div style={{ width: ${percentage}% }} />.
• Recharts colors: const CHART_COLORS = { text: 'var(--color-text)' }; <XAxis tick={{ fill: CHART_COLORS.text }} />.
• Responsive grid: className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6".
• One-off layout tweaks: className="w-[327px]" when no design token exists.