tomevault-io Tailwind CSS Skill
Best Practices
- Utility First: Use classes directly in HTML (
flex items-center). - Configuration: Define colors/fonts in
tailwind.config.js, not arbitrary values (text-[#123456]). - Components: Extract repeated patterns to React components, NOT
@apply.- Bad:
.btn { @apply px-4 py-2 ... } - Good:
<Button variant="primary" />
- Bad:
Common Pitfalls
- Arbitrary Values: Overusing
[]syntax defeats consistency. - Specificity Wars: Mixing Tailwind with SCSS/Modules often breaks. Stick to one.
References
Converted and distributed by TomeVault — claim your Tome and manage your conversions.