10 Tailwind CSS Utilities You’re Probably Not Using (But Should)

23 days ago
Published
Blog Featured Image

Most UIs don’t need a makeover, they need smarter defaults.

Use these 10 Tailwind utilities to clamp text, lock ratios, smooth scroll, and kill z-index bugs.

All supported in Tailwind 3.x, two from official plugins, with snippets you can drop in today.

If you’ll use prose and line-clamp, add the official plugins:

npm i -D @tailwindcss/typography @tailwindcss/line-clamp
// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{ts,tsx,js,jsx}",
    "./components/**/*.{ts,tsx,js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/line-clamp"),
  ],
};

1) line-clamp

What it does: Truncates multi-line text with an ellipsis.

Why it matters: Product cards, blog grids, and changelog lists stay the same height. Fewer janky layouts. Better scan-ability.

Use it:

<p 
class="text-sm text-muted-foreground line-clamp-2">
 Cut off long copy in cards without writing custom CSS. 
</p>

Tip:

Pick the clamp by context: line-clamp-1 for titles, -2/-3 for summaries.

2) aspect-ratio

What it does: Reserves space for media; no layout shift.

Why it matters: Better LCP (Largest Contentful Paint) /CLS (Cumulative Layout Shift), fewer “jumping” cards, happier users.

Use it:

<div class="aspect-[16/9] overflow-hidden rounded-lg bg-slate-100">
  <img
    src="/demo.jpg"
    alt=""
    class="h-full w-full object-cover"
  >
</div>

Tip:

aspect-square and aspect-video cover 80% of cases.

3) prose (Typography plugin)

What it does: Good-looking default styles for rich text.

Why it matters: Docs, blog, and “Help” pages look polished in minutes, and minimizes on heading/paragraph styles.

Use it:

<article class="prose prose-zinc dark:prose-invert max-w-none">
  <!-- MD/Markdown output here -->
</article>

Tip:

Add utility layers on top: prose-headings:font-semibold, prose-a:no-underline hover:prose-a:underline.

4) sr-only

What it does: Hides text visually but keeps it for screen readers.

Why it matters: Makes buttons and icon-only UIs accessible without harming UX or SEO.

Use it:

<button class="inline-flex items-center gap-2">
  <svg>
    <!-- icon -->
  </svg>
  <span class="sr-only">Open settings</span>
</button>

Tip:

Pair with not-sr-only when you need to reveal the text at certain breakpoints.

5) backdrop-blur

What it does: Blurs content behind an element (backdrop-filter).

Why it matters: Glassy modals/navs that keep context visible; readable over busy content.

Use it:

<header
  class="
    fixed
    inset-x-0
    top-0
    z-50
    backdrop-blur
    supports-[backdrop-filter]:bg-white/60
  "
>
  <!-- nav -->
</header>

Tip:

Always combine with a translucent background like bg-white/60 for contrast.

6) scroll-smooth

What it does: Enables smooth anchor scrolling.

Why it matters: Docs and marketing pages feel premium. Also reduces “where did I jump to?” friction.

Use it (Next.js root layout):

export default function RootLayout({ children }) {
  return (
    <html lang="en" className="scroll-smooth">
      <body>{children}</body>
    </html>
  );
}

7) isolate

What it does: Creates a new stacking context (isolation: isolate).

Why it matters:  Keeps layers self-contained so fixes in one component don’t break another. isolate creates a new stacking context for the component.  

Use it:

<div class="relative isolate">
  <!-- your component layers (backdrops, popovers, etc.) -->
</div>

Tip:

Make complex components self-contained by default with isolate.

8) mix-blend-*

What it does: Sets how an element blends with what’s behind it.

Why it matters: Creates brand-matched hero images and charts without the need for using Photoshop.

Use it:

<img
  src="/hero-shape.svg"
  alt=""
  class="mix-blend-multiply opacity-80"
/>

Tip:

Try mix-blend-screen or multiply over brand gradients for instant depth.

9) overscroll-contain

What it does: Prevents “scroll chaining” into the page when you reach the edge of a scrollable area.

Why it matters:  It stops scroll chaining. When a scrollable panel (modal body, drawer, carousel) hits its edge, the scroll doesn’t propagate to the page. The body (within which the component lies) stays fixed.  

Use it:

<div class="max-h-[70vh] overscroll-contain overflow-y-auto">
  <!-- modal body -->
</div>

10) break-all

What it does: Forces line breaks inside words.

Why it matters: Long URLs, hashes, or unbroken strings won’t blow up your layout.

Use it:

<code class="break-all text-xs">
  https://yourapp.com/super-long-callback/url/that/never/ends?token=...
</code>

Tip:

Prefer break-words for nicer wrapping; use break-all as the safety net.

Use these in…

  • Cards: aspect-* on media, line-clamp-2 on excerpt.
  • Headers/menus: backdrop-blur + translucent bg.
  • Docs/blog: prose container; add scroll-smooth to the page.
  • Icon buttons: add an sr-only label.
  • Modals/drawers: wrap body in overscroll-contain; use isolate on the component root.
  • Visual polish: try mix-blend-multiply on subtle shapes.
  • Edge content: break-all for long strings.

Conclusion

You don’t need a redesign to upgrade your SaaS UI. Pick two or three of these where it hurts most, prevent layout shift (aspect-*), handle text overflow (line-clamp, break-all), fix modal scroll bleed (overscroll-contain), stop z-index bugs (isolate), and ship readable docs (prose).

Ship that UI!

Author

J
Joshua

Software Developer

Back to Blog