# Tailwindcss

> Tailwind CSS utility-first framework. Use for custom designs.

- Skill: `g1joshi/tailwindcss` (Agent Skill)
- Install (CLI): `npx skillmds@latest add g1joshi/tailwindcss`
- Raw SKILL.md: https://api.skillmd.com/api/skills/g1joshi/tailwindcss/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: G1Joshi (https://skillmd.com/u/g1joshi)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/g1joshi/tailwindcss

---


# Tailwind CSS

Tailwind v4 (2024/2025) introduces the **Oxide Engine**: a Rust-based, unified toolchain that is 10x faster and requires no configuration (`tailwind.config.js` is optional).

## When to Use

- **Custom Design**: When you don't want the "Bootstrap look".
- **Performance**: Generates tiny CSS files (only used classes).
- **Design Systems**: Configuring tokens (colors, spacing) enforces consistency.

## Core Concepts

### Utility Classes

`flex`, `text-red-500`, `p-4`.

### Arbitrary Values

`w-[500px]`, `bg-[#1da1f2]`.

### Modifiers

`hover:bg-blue-700`, `md:w-1/2`, `dark:text-white`.

## Best Practices (2025)

**Do**:

- **Use v4 Oxide**: No more separate PostCSS watcher needed.
- **Use `@apply` sparingly**: Keep utilities in HTML for grep-ability.
- **Use `prettier-plugin-tailwindcss`**: Automatically sorts classes.

**Don't**:

- **Don't string concat**: `class="text-" + color` breaks the purge engine. Use `clsx`.

## References

- [Tailwind CSS Documentation](https://tailwindcss.com/)