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
Decision gist · record as of 2026-03-28
Tailwind-4 teaches Tailwind CSS 4 best practices, including when to use cn(), semantic classes, and dynamic styling patterns. 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.
Use it when
- Tailwind-4 recommends cn() (from clsx or twMerge) to merge and conditionally apply Tailwind classes.
- Tailwind-4 strongly favors semantic Tailwind color classes over var() or hex values.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
Gentleman-Programming/Gentleman-Skills/tailwind-4
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
curated/tailwind-4/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn Tailwind CSS 4 best practices and styling patterns”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master Tailwind CSS 4 styling with a decision tree covering semantic classes, conditional styling via cn(), and dynamic values. This skill enforces best practices: use Tailwind color classes instead of hex codes, reserve var() for library props only, and apply style props for truly dynamic values. Covers flexbox, grid, spacing, typography, states, responsive design, and dark mode patterns.
This skill covers Tailwind CSS, a utility-first framework that lets you compose designs from low-level utility classes instead of writing CSS. Learn responsive design patterns, dark mode implementation, configuration options, and how to integrate Tailwind into modern component frameworks.
Master Tailwind CSS with 29 rules spanning responsive layouts, dark mode setup, reusable component patterns, and configuration across v3.4+ and v4. Learn mobile-first design, conditional styling with utilities, and how to migrate projects from v3 to v4 using the new CSS-first approach.
This skill guides you through building modern frontend projects with Vite, React, and TailwindCSS v4, including proper configuration, project structure, and component patterns. It covers environment setup, TypeScript configuration pitfalls to avoid, and practical development conventions using lucide-react icons.
Master advanced Tailwind component architecture using class-variance-authority for variant management, compound patterns for complex states, and utility helpers like cn for safe class composition. Learn context-based component systems, data-attribute styling, and polymorphic design patterns used in production design systems.
Ui Builder guides you through constructing accessible, responsive interfaces with React and Tailwind CSS. It covers mobile-first design, semantic HTML, performance optimization, and reusable component patterns including buttons, cards, inputs, dialogs, and forms.
More skills Tailwind Design System (unlicensed) · shadcn-ui (Apache-2.0) · tailwindcss-framework-integration (MIT) · Tailwind Design System (AGPL-3.0)