{"enrichment":{"faq":[{"a":"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\u2014helping you write maintainable, performant styles while avoiding common mistakes like using hex codes or var() in className attributes.","q":"What is tailwind-4 and how does it help with styling?"},{"a":"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.","q":"When and how should I use cn() for conditional classes in Tailwind?"},{"a":"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\u2014colors, sizes, or spacing from data\u2014use 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.","q":"How do I apply dynamic styling and CSS variables correctly in Tailwind?"},{"a":"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.","q":"What are common Tailwind CSS 4 styling patterns for layout and components?"},{"a":"tailwind-4 highlights key pitfalls: never use hex color codes directly\u2014always 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.","q":"What mistakes should I avoid when using Tailwind CSS 4?"},{"a":"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.","q":"How does tailwind-4 handle responsive design and dark mode?"}],"shadow_tags":["utility-first-css","class-composition","responsive-design","theme-management","conditional-rendering","design-tokens","component-styling","css-in-js-alternative","accessibility-states"],"summary_rewrite":"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."},"files":[{"bytes":4845,"path":"skills/tailwind-4/SKILL.md","sha256":"8b918a68265db486a3d1264df70d662b72f2069d073aadf30de1e6967a8e07c1","url":"https://skillfed.io/files/prowler-cloud/prowler/tailwind-4/5c101a60/SKILL.md"}],"id":"prowler-cloud/prowler/tailwind-4","links":{"html":"https://skillfed.io/prowler-cloud/prowler/tailwind-4","md":"https://skillfed.io/prowler-cloud/prowler/tailwind-4.md","repo":"https://github.com/prowler-cloud/prowler"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2285,"language":"Python","last_updated":"2026-07-27","license":"Apache-2.0","name":"tailwind-4","publisher":"prowler-cloud","stars":14491},"relations":{"similar":[{"id":"Gentleman-Programming/Gentleman-Skills/tailwind-4"},{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"AsyrafHussin/agent-skills/tailwind-best-practices"},{"id":"bytedance/agentkit-samples/byted-util-vite-react-tailwind"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components"},{"id":"jmsktm/claude-settings/ui-builder"},{"id":"sergiodxa/agent-skills/frontend-tailwind-best-practices"},{"id":"pixel-point/animate-text/tailwind-design-system"},{"id":"hairyf/skills/uniwind"},{"id":"manutej/luxor-claude-marketplace/tailwind-css"}]},"slug":{"owner":"prowler-cloud","repo":"prowler","skill":"tailwind-4"},"version":"5c101a60"}