modern-tailwind

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>