{"enrichment":{"faq":[{"a":"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.","q":"What are Tailwind CSS 4 best practices?"},{"a":"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\u2014for 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.","q":"How to use cn() function tailwind for conditional classes?"},{"a":"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.","q":"Should I use var() or semantic Tailwind classes for colors?"},{"a":"Tailwind-4 handles dynamic values by using the style prop for values that can't be expressed as class names\u2014such 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.","q":"How do I style dynamic values and library components correctly?"},{"a":"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.","q":"What's the difference between cn() and className in Tailwind?"},{"a":"Tailwind-4 uses responsive prefixes (sm:, md:, lg:) and dark: prefix for dark mode. Apply responsive classes directly to elements\u2014for 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.","q":"How do I implement responsive and dark mode styling in Tailwind?"}],"shadow_tags":["conditional-styling","utility-first-css","design-system-patterns","responsive-breakpoints","theme-integration","component-composition","css-in-js-alternatives","state-management-ui"],"summary_rewrite":"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."},"files":[{"bytes":4705,"path":"curated/tailwind-4/SKILL.md","sha256":"7dbf1477e95ef24f8685a989479ea3b5c525e61d94f2ca496887cecb7ceb4c9c","url":"https://skillfed.io/files/Gentleman-Programming/Gentleman-Skills/tailwind-4/b37f6614/SKILL.md"}],"id":"Gentleman-Programming/Gentleman-Skills/tailwind-4","links":{"html":"https://skillfed.io/Gentleman-Programming/Gentleman-Skills/tailwind-4","md":"https://skillfed.io/Gentleman-Programming/Gentleman-Skills/tailwind-4.md","repo":"https://github.com/Gentleman-Programming/Gentleman-Skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":88,"language":null,"last_updated":"2026-03-28","license":"MIT","name":"tailwind-4","publisher":"Gentleman-Programming","stars":604},"relations":{"similar":[{"id":"prowler-cloud/prowler/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":"pixel-point/animate-text/tailwind-design-system"},{"id":"existential-birds/beagle/shadcn-ui"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integration"},{"id":"calesthio/OpenMontage/tailwind-design-system"}]},"slug":{"owner":"Gentleman-Programming","repo":"Gentleman-Skills","skill":"tailwind-4"},"version":"b37f6614"}