Pro Tips and Tricks

A senior's grab-bag of underused utilities that make UIs look finished.

These are the small utilities that separate a rough draft from something that feels shipped. None are hard; all are easy to forget.

Sizing and text

size-10 — width and height in one class. The v4 shortcut you will use most, especially for avatars and icons.
truncate / line-clamp-3 — tame overflowing text to one or n lines.
text-balance — balanced headline wrapping; text-pretty avoids typographic orphans in body copy.

Structure without extra markup

divide-y divide-slate-200 — borders between list children, none on the ends.
space-y-3 — consistent vertical rhythm in a stack.
aspect-video / aspect-square — ratio boxes for media and thumbnails.

The delightful little ones

accent-cyan-500 — brand your native checkboxes and radios for free.
scroll-smooth — smooth anchor scrolling with one class on html.
Gradient text: bg-clip-text text-transparent bg-gradient-to-r.
Arbitrary variants: [&:nth-child(3)]:bg-cyan-50 reaches selectors no named variant covers.

Example

Loading editor…

Press Run to see the result.

When to use it

A UI library author uses size-10 instead of w-10 h-10 on every avatar and icon button, halving the class count on the most repeated element across hundreds of components.
A developer uses text-balance on hero headings and text-pretty on body copy, eliminating typographic orphans and ragged line endings without manual <wbr> tags.
A product team wires scroll-smooth on the <html> element and uses scroll-mt-20 on each section so jump-to-section links land below the sticky navbar automatically.

More examples

size-, text-balance, and truncate

size-10 replaces w-10 h-10, text-balance improves heading line breaks, and truncate replaces the three-class overflow/whitespace/text-overflow combo.

<!-- size-* sets both width and height in one class (v3.4+) -->
<img src="avatar.jpg" alt="User"
     class="size-10 rounded-full object-cover ring-2 ring-cyan-400" />

<!-- text-balance prevents lone words on hero headings -->
<h1 class="text-4xl font-bold text-balance max-w-xl">
  The fastest way to ship beautiful interfaces
</h1>

<!-- truncate clips long text with an ellipsis in one class -->
<p class="truncate max-w-xs text-sm text-gray-600">
  This is a very long product description that should be clipped after one line.
</p>

Scroll utilities and sticky offset

scroll-smooth on <html> enables CSS smooth scrolling globally; scroll-mt-20 on each section adds a top offset equal to the sticky navbar height so anchors land in the right place.

<html class="scroll-smooth">
<body>
  <nav class="sticky top-0 z-50 h-16 bg-white shadow-sm"><!-- nav --></nav>

  <section id="features" class="scroll-mt-20 py-16">
    <h2 class="text-3xl font-bold">Features</h2>
  </section>

  <section id="pricing" class="scroll-mt-20 py-16">
    <h2 class="text-3xl font-bold">Pricing</h2>
  </section>

  <a href="#features" class="underline text-cyan-600">Jump to Features</a>
</body>

line-clamp, divide-y, and ring utilities

line-clamp-3 clamps multiline text cleanly; divide-y adds separators between children automatically; ring-* provides accessible keyboard focus styles that compose with the offset utility.

<!-- line-clamp-3: clamp multiline text to exactly 3 lines -->
<p class="line-clamp-3 text-sm text-gray-600">
  Tailwind CSS is a utility-first framework packed with classes like flex,
  pt-4, text-center, and rotate-90 that can be composed to build any design,
  directly in your markup with zero opinions about component structure.
</p>

<!-- divide-y: adds a border between list items without individual margins -->
<ul class="divide-y divide-gray-100 rounded-xl border border-gray-200">
  <li class="px-4 py-3 text-sm text-gray-700">First item</li>
  <li class="px-4 py-3 text-sm text-gray-700">Second item</li>
  <li class="px-4 py-3 text-sm text-gray-700">Third item</li>
</ul>

<!-- ring-* for accessible focus styles -->
<button class="px-4 py-2 rounded-lg bg-cyan-600 text-white text-sm font-semibold
               focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2">
  Accessible button
</button>

Discussion

Be the first to comment on this lesson.