TailwindCSS Guide

Avoid separating adjacent siblings with margin on children. Flow and grid layouts should control spacing with gap-* on the parent to avoid margin overflow or collapse.

<!-- children force mb-4 -->
<div class="flex flex-col">
  <div class="mb-4">Item 1</div>
  <div class="mb-4">Item 2</div>
  <div>Item 3</div>
</div>

<!-- parent defines gap-4 -->
<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

In block-level lists where flex/grid is inconvenient, use space-y-* / space-x-* on the parent to handle spacing between children automatically.

<div class="block">
  <p class="mt-2">Paragraph 1</p>
  <p class="mt-2">Paragraph 2</p>
</div>

<div class="space-y-2">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

Avoid magic numbers like w-[13px] or p-[15px]. Align strictly to the Tailwind scale for a consistent design system. Define special system-level sizes in the theme.

<div class="w-[320px] p-[16px] text-[14px]">
  Card
</div>

<div class="w-80 p-4 text-sm">
  Card
</div>

Never hardcode hex values. Use semantic theme colors combined with the opacity slash syntax (e.g. /80) instead of rgba(...).

<div class="bg-[#0f172a] text-[rgba(255,255,255,0.8)]">
  Dark Block
</div>

<div class="bg-slate-900 text-white/80">
  Dark Block
</div>

v4 drops the traditional tailwind.config.js. Theme extensions are declared in the CSS entry file with the @theme directive for a more direct configuration.

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#0284c7'
      }
    }
  }
}

@import "tailwindcss";

@theme {
  --color-brand: #0284c7;
  --font-display: "Inter", sans-serif;
}

In v4 you no longer need the explicit transform class — use transform utilities directly. It also natively supports rotate-x-*, perspective-* and other 3D utilities.

<div class="transform scale-105 rotate-45"></div>

<div class="scale-105 rotate-45"></div>

Leverage modern CSS: use has-*, group-has-* and container queries (@container) to replace complex JS logic or global media queries.

<label className={isChecked
  ? "border-blue-500"
  : "border-gray-200"}>
  <input type="checkbox" onChange={...} />
</label>

<label class="border-gray-200
  has-[:checked]:border-blue-500">
  <input type="checkbox" />
</label>