tailwind-best-practices
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.
Tailwind Best Practices teaches responsive design, dark mode, and component patterns for Tailwind CSS v3.4+ and v4.
AI-generated summary based on this skill's SKILL.md
Install
AsyrafHussin/agent-skills/tailwind-best-practices
git clone https://github.com/AsyrafHussin/agent-skills
cp -r agent-skills/skills/tailwind-best-practices ~/.claude/skills/tailwind-best-practicesnpx skillfed install AsyrafHussin/agent-skills/tailwind-best-practicesFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to use tailwind responsive design effectively?
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.
What's the best way to set up tailwind dark mode?
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.
How do I migrate a tailwind v3 project to v4?
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.
How can I build reusable component styles using tailwind?
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.
What are tailwind css best practices for styling conventions?
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.
How do I customize tailwind theme, colors, and breakpoints?
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.
SKILL.md
rendered from the published skill — quoted content, verbatim
Tailwind CSS Best Practices
Comprehensive patterns for building consistent, maintainable interfaces with Tailwind CSS v3.4+ and v4. Contains 29 rules covering responsive design, dark mode, component patterns, configuration, and v4 migration.
Metadata
- Version: 1.0.0
- Framework: Tailwind CSS v3.4+ / v4.0+
- Rule Count: 29 rules across 8 categories
- License: MIT
- Documentation: tailwindcss.com/docs
Step 1: Detect Tailwind Version
Always check the version before giving any advice. v3 and v4 are fundamentally different.
Check package.json for the installed version:
```json
{ "tailwindcss": "^3.x" } // → v3 rules apply
{ "tailwindcss": "^4.x" } // → v4 rules
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/tailwind-best-practices/AGENTS.md
skills/tailwind-best-practices/README.md
skills/tailwind-best-practices/SKILL.md
skills/tailwind-best-practices/metadata.json
skills/tailwind-best-practices/rules/_sections.md
skills/tailwind-best-practices/rules/_template.md
skills/tailwind-best-practices/rules/comp-clsx-cn.md
skills/tailwind-best-practices/rules/component-btn-variants.md
skills/tailwind-best-practices/rules/component-card-patterns.md
skills/tailwind-best-practices/rules/component-form-elements.md
skills/tailwind-best-practices/rules/component-modals.md
skills/tailwind-best-practices/rules/component-navigation.md
skills/tailwind-best-practices/rules/component-tables.md
skills/tailwind-best-practices/rules/config-custom-colors.md
skills/tailwind-best-practices/rules/config-custom-fonts.md