tailwind-4
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.
tailwind-4 teaches Tailwind CSS 4 patterns and best practices for semantic styling without var() in classNames.
AI-generated summary based on this skill's SKILL.md
Install
prowler-cloud/prowler/tailwind-4 · repository language: Python
git clone https://github.com/prowler-cloud/prowler
cp -r prowler/skills/tailwind-4 ~/.claude/skills/tailwind-4npx skillfed install prowler-cloud/prowler/tailwind-4Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is tailwind-4 and how does it help with styling?
tailwind-4 is a comprehensive guide to Tailwind CSS 4 styling best practices and patterns. It provides a decision tree for choosing between semantic Tailwind classes, the cn() utility for conditional styling, and dynamic values via CSS variables or style props. tailwind-4 covers flexbox, grid, spacing, typography, state variants, responsive design, and dark mode—helping you write maintainable, performant styles while avoiding common mistakes like using hex codes or var() in className attributes.
When and how should I use cn() for conditional classes in Tailwind?
tailwind-4 recommends using cn() when you need to apply conditional Tailwind classes based on component state or props. cn() merges and deduplicates class strings, preventing conflicts when multiple conditions might apply. Use it for dynamic UI states (active, disabled, hover variants) and component variants. Reserve cn() for Tailwind semantic classes only; for truly dynamic values like colors from data or user input, use style props or CSS variables instead of trying to construct class names dynamically.
How do I apply dynamic styling and CSS variables correctly in Tailwind?
tailwind-4 distinguishes between two approaches: CSS variables (var()) should only be used for library-provided props or design tokens already defined in your Tailwind config, never injected into className strings. For truly dynamic values—colors, sizes, or spacing from data—use inline style props directly. Tailwind's arbitrary values (e.g., `w-[123px]`) work for static cases but aren't suitable for runtime-computed values. This separation keeps your markup clean and avoids runtime class generation pitfalls.
What are common Tailwind CSS 4 styling patterns for layout and components?
tailwind-4 covers essential patterns: flexbox for alignment and distribution, grid for multi-column layouts, spacing utilities (gap, p, m) for consistent rhythm, and typography classes for text hierarchy. State variants (hover, focus, active, disabled) handle interactivity; responsive prefixes (sm:, md:, lg:) adapt layouts across breakpoints. Dark mode uses the dark: prefix. For complex components, combine cn() for conditional base styles with semantic Tailwind classes. Reference these patterns to build consistent, accessible interfaces efficiently.
What mistakes should I avoid when using Tailwind CSS 4?
tailwind-4 highlights key pitfalls: never use hex color codes directly—always use Tailwind's semantic color classes from your design system. Don't inject CSS var() into className strings; reserve var() for library props only. Avoid constructing class names dynamically at runtime; use style props for computed values instead. Don't confuse style prop usage with className; style props handle truly dynamic values while className should contain only static or cn()-merged Tailwind classes. These practices ensure predictable, maintainable styling.
How does tailwind-4 handle responsive design and dark mode?
tailwind-4 teaches responsive design via Tailwind's mobile-first breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:), allowing you to stack classes for different screen sizes. Dark mode uses the dark: prefix to apply alternate styles when dark mode is active. Combine both: `dark:md:bg-slate-900` applies a dark background on medium screens in dark mode. Use semantic color tokens from your design system rather than hardcoded values, ensuring consistency across light and dark themes and all breakpoints.
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
```typescript // ❌ NEVER: Hex colors in className <p className="text-[#ffffff]" /> <div
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/tailwind-4/SKILL.md