Modern Tailwind

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

academind 10f6e55 591 B Updated

File contents

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>

academind/codex-course-resources/tree/main/other/skills/modern-tailwind commit 10f6e55687

Frequently asked questions

npx skillmds@latest add academind/modern-tailwind