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
Decision gist · record as of 2026-05-16
Tailwind Best Practices teaches responsive design, dark mode, and component patterns for Tailwind CSS v3.4+ and v4. 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.
Use it when
- tailwind-best-practices covers dark mode implementation through class-based or system preference strategies.
- tailwind-best-practices guides v3-to-v4 migration by explaining the CSS-first configuration approach.
Verify before relying
Read SKILL.md below before installing (35 files). Open directory: indexed for reading, not audited.
Install
AsyrafHussin/agent-skills/tailwind-best-practices
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
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)
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
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 responsive design patterns and mobile-first approach with Tailwind”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Resolve Tailwind CSS styling problems with structured troubleshooting for classes that won't apply, dynamic class generation failures, and version migration conflicts. Get decision trees, configuration templates, and debugging steps for content detection, IntelliSense setup, and build cache issues.
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.
Automates the mechanical parts of upgrading from Tailwind v3 to v4, then handles the judgment calls the codemod can't: reconciling dependencies, porting config to CSS-first `@theme`, auditing v4's changed defaults (border, ring, placeholder, cursor, dialog, hover), and verifying the rendered output stays identical. Works across Next.js, Vite, Tailwind CLI, and plain PostCSS setups.
Tailwind Coder styles Rails applications with Tailwind CSS utility classes and responsive breakpoints. It provides patterns for common Rails elements like forms, links, cards, grids, and tables, plus helper methods to reduce repetition across views.
Get framework-specific Tailwind CSS setup instructions covering React with Vite, Next.js App Router, Vue 3, Nuxt, SvelteKit, and Astro. Includes configuration files, dark mode setup, and reusable component patterns for each framework.
ui-web guides you through building accessible web components that meet WCAG 2.1 AA standards. It enforces color contrast rules, visible focus states, and proper button styling while providing glassmorphism patterns, a semantic color system, and dark mode support—all grounded in Tailwind and modern design principles.
More skills Ui Builder (unlicensed) · byted-util-vite-react-tailwind (Apache-2.0) · tailwind-best-practices (MIT) · Tailwind Design System (unlicensed) · responsive-design-system (MIT) · tailwindcss-fundamentals-v4 (MIT) · Tailwind Css (unlicensed) · tailwindcss (MIT)