Tailwind CSS

Lesson 04

Spacing and layout consistency

Use a consistent spacing scale and layout rhythm instead of one-off nudges that make future changes fragile.

Good Code

ReviewPanel.tsx
export function ReviewPanel({ title, items }: ReviewPanelProps) {
  return (
    <section className="rounded-md border border-slate-200 bg-white p-4">
      <div className="space-y-3">
        <h2 className="text-base font-semibold text-slate-950">{title}</h2>
        <ul className="space-y-2">
          {items.map((item) => (
            <li key={item.id} className="rounded-md bg-slate-50 p-3 text-sm text-slate-700">
              {item.label}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

Bad Code

ReviewPanel.tsx
export function ReviewPanel({ title, items }) {
  return (
    <section className="rounded-md border bg-white p-[19px]">
      <div className="mt-[3px]">
        <h2 className="mb-[14px] ml-[2px] text-[17px] font-semibold">{title}</h2>
        <ul>
          {items.map((item) => (
            <li key={item.id} className="mb-[7px] rounded-md bg-slate-50 px-[11px] py-[9px]">
              {item.label}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

Review Notes

What to review

Good Code

The good version uses container padding and space-y utilities to make vertical rhythm explicit.

Bad Code

The bad version uses arbitrary pixel nudges for almost every gap. That usually means the code was tuned by eye for one screenshot, not designed as a reusable layout.

Takeaways

  • Repeated spacing utilities should reveal a rhythm; random values usually reveal local visual patching.