modern-tailwind

name	modern-tailwind
description	Write clean, modern, concise Tailwind CSS code. Use whenever working on or reviewing Tailwind CSS code.

Variables in arbitrary values

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

Instead of:

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

write:

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

Layout best practices

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

Examples:

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