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
Decision gist · record as of 2026-07-27
tailwind-4 teaches Tailwind CSS 4 patterns and best practices for semantic styling without var() in classNames. 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.
Use it when
- tailwind-4 recommends using cn() when you need to apply conditional Tailwind classes based on component state or props.
- tailwind-4 distinguishes between two approaches: CSS variables (var()) should only be used for library-provided props or design tokens.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
prowler-cloud/prowler/tailwind-4 · repository language: Python
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 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)
File tree — 1 file
skills/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
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.
Prowler-ui equips you with the component patterns and design principles that power Prowler's cloud security platform. Learn the established conventions for building cohesive user interfaces and maintaining design consistency across the ecosystem. This skill bridges the gap between raw components and production-ready UI architecture.
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.
More skills Ui Builder (unlicensed) · Tailwind Design System (unlicensed) · Tailwind Css (unlicensed)