{"enrichment":{"faq":[{"a":"tailwind-best-practices teaches responsive design through mobile-first approach and breakpoint utilities. Start with base styles for mobile, then layer responsive prefixes (sm:, md:, lg:, xl:, 2xl:) to adapt layouts for larger screens. Use Tailwind's grid and flexbox utilities to build flexible components that reflow naturally across devices without media query syntax.","q":"How to use tailwind responsive design effectively?"},{"a":"tailwind-best-practices covers dark mode implementation through class-based or system preference strategies. Enable dark mode in your config, then use dark: prefix on utilities to define alternate styles. Toggle the dark class on your root element or let Tailwind detect prefers-color-scheme automatically. This enables seamless theme switching without extra JavaScript complexity.","q":"What's the best way to set up tailwind dark mode?"},{"a":"tailwind-best-practices guides v3-to-v4 migration by explaining the CSS-first configuration approach. Update your config to use the new format, migrate custom theme values to CSS variables, and adopt the simplified utility syntax. The skill covers configuration changes and patterns to modernize your project while maintaining existing component functionality.","q":"How do I migrate a tailwind v3 project to v4?"},{"a":"tailwind-best-practices demonstrates component patterns using utility composition and variants. Combine utilities into logical groups, use @apply for repeated patterns when needed, and leverage Tailwind's variant system for states like hover, focus, and responsive breakpoints. This approach keeps components DRY while maintaining the utility-first philosophy.","q":"How can I build reusable component styles using tailwind?"},{"a":"tailwind-best-practices establishes 29 rules covering mobile-first ordering, consistent breakpoint usage, semantic color naming, and accessibility patterns. Follow utility ordering conventions, use conditional classes with clsx for dynamic styling, respect reduced-motion preferences, and maintain consistent spacing scales. These conventions ensure maintainable, performant, and accessible Tailwind projects.","q":"What are tailwind css best practices for styling conventions?"},{"a":"tailwind-best-practices explains theme configuration across v3.4+ and v4. Extend or override colors, fonts, spacing, and breakpoints in your config file. Use CSS variables for dynamic theming, define custom breakpoints for your design system, and leverage the theme() function in utilities. This customization keeps your design system consistent while maintaining Tailwind's utility benefits.","q":"How do I customize tailwind theme, colors, and breakpoints?"}],"shadow_tags":["utility-first-css","responsive-layouts","theme-customization","version-migration","component-composition","accessibility-patterns","design-system","css-framework"],"summary_rewrite":"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."},"files":[{"bytes":11337,"path":"skills/tailwind-best-practices/SKILL.md","sha256":"34d742e6f19f15ea01a4b11a23cbb9b3a600b062a10ea4d911cb149cc892a443","url":"https://skillfed.io/files/AsyrafHussin/agent-skills/tailwind-best-practices/b53a71d2/SKILL.md"}],"id":"AsyrafHussin/agent-skills/tailwind-best-practices","links":{"html":"https://skillfed.io/AsyrafHussin/agent-skills/tailwind-best-practices","md":"https://skillfed.io/AsyrafHussin/agent-skills/tailwind-best-practices.md","repo":"https://github.com/AsyrafHussin/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":9,"language":null,"last_updated":"2026-05-16","license":"MIT","name":"tailwind-best-practices","publisher":"AsyrafHussin","stars":58},"relations":{"similar":[{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"bytedance/agentkit-samples/byted-util-vite-react-tailwind"},{"id":"pixel-point/animate-text/tailwind-design-system"},{"id":"patricio0312rev/skills/responsive-design-system"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"manutej/luxor-claude-marketplace/tailwind-css"},{"id":"Gentleman-Programming/Gentleman-Skills/tailwind-4"},{"id":"calesthio/OpenMontage/tailwind-design-system"},{"id":"prowler-cloud/prowler/tailwind-4"},{"id":"giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns"}]},"slug":{"owner":"AsyrafHussin","repo":"agent-skills","skill":"tailwind-best-practices"},"version":"b53a71d2"}