# Tailwind CSS

> Use when working with a utility-first CSS framework

- Skill: `tomevault-io/tailwind-css-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/tailwind-css-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tailwind-css-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/tailwind-css-2

---


# Tailwind CSS Skill

## Best Practices
1.  **Utility First**: Use classes directly in HTML (`flex items-center`).
2.  **Configuration**: Define colors/fonts in `tailwind.config.js`, not arbitrary values (`text-[#123456]`).
3.  **Components**: Extract repeated patterns to React components, NOT `@apply`.
    *   *Bad*: `.btn { @apply px-4 py-2 ... }`
    *   *Good*: `<Button variant="primary" />`

## Common Pitfalls
*   **Arbitrary Values**: Overusing `[]` syntax defeats consistency.
*   **Specificity Wars**: Mixing Tailwind with SCSS/Modules often breaks. Stick to one.

## References
*   [Tailwind Docs](https://tailwindcss.com/)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/sami) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->