# Modern Tailwind

> Write clean, modern, concise Tailwind CSS code. Use whenever working on or reviewing Tailwind CSS code.

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

---


# Variables in arbitrary values

When using variables in arbitrary values, use the modern, shorter syntax.

Instead of:

```html
<div class="bg-[var(--color)]" />
```

write:

```html
<div class="bg-(--color)" />
```

# Layout best practices

Prefer grid for 2D layouts.
Prefer flex for 1D alignment.

Examples:

```html
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  <div class="flex items-center justify-between"></div>
</div>
```