Back to all blog posts

15+ Tailwind CSS one liners that replace CSS rules

Think Tailwind CSS is just bloated markup? These 15+ utility classes will change your mind. See how single classes replace entire CSS blocks.

Published on August 18, 2025 by Michael Andreuzza

Look, I get it. You see Tailwind CSS and think “why would I clutter my HTML with all those classes when I can just write clean CSS?”

But you know what? Some of these Tailwind utilities are absolute bangers. They replace entire CSS blocks that you’d otherwise have to write (and remember) yourself. Taking into account your attention span, you are well better using Tailwind CSS… Even if you’re team Plain-CSS Karen, these examples might surprise you.

Let me show you what I meanm, come here.

1. Text truncation with line-clamp

Remember having to Google “CSS multiline text truncation” every single time…?

Without Tailwind:

.text-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

With Tailwind:

<p class="line-clamp-3">
  Tailwind makes truncating text simple. Instead of juggling multiple CSS rules,
  you can control it with a single class.
</p>

2. Perfect squares with aspect-square

Creating responsive squares without weird padding-bottom hacks? Finally.

Without Tailwind:

.square {
  width: 100%;
  aspect-ratio: 1 / 1;
}

With Tailwind:

<div class="aspect-square bg-blue-200"></div>

3. Flex growth with flex-1

This one’s simple but saves you from typing the same flex properties over and over.

Without Tailwind:

.item {
  flex-grow: 1;
  flex-basis: 0;
}

With Tailwind:

<div class="flex">
  <div class="flex-1 bg-green-200">Expands to fill space</div>
  <div class="w-32 bg-green-400">Fixed width</div>
</div>

4. Full coverage positioning with inset-0

Overlays and absolute positioning, we’ve all been there with the four-line bullshit of top, right, bottom, left.

Without Tailwind:

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

With Tailwind:

<div class="relative">
  <img src="image.jpg" alt="Demo" />
  <div class="absolute inset-0 bg-black/50"></div>
</div>

5. Z-index context with isolate

This one’s a cracked one for those weird z-index bugs that make no sense until you remember stacking contexts exist.

Without Tailwind:

.section {
  isolation: isolate;
}

With Tailwind:

<div class="relative isolate z-0">
  <div class="absolute -z-10 bg-yellow-200">Background</div>
  <div class="relative z-10">Foreground content</div>
</div>

6. Screen reader only content with sr-only, probably my favourite…look at that list of classes ffs…

Without Tailwind:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

With Tailwind:

<button>
  <span class="sr-only">Close dialog</span>
  <svg><!-- close icon --></svg>
</button>

7. Perfect circles with rounded-full

Without Tailwind:

.avatar {
  border-radius: 50%;
  width: 64px;
  height: 64px;
}

With Tailwind:

<img class="size-16 rounded-full" src="...." alt="..." />

8. Centered content with place-items-center

Without Tailwind:

.centered {
  display: grid;
  place-items: center;
}

With Tailwind:

<div class="grid place-items-center h-screen">
  <div>Perfectly centered content</div>
</div>

9. Smooth scrolling with scroll-smooth

Without Tailwind:

html {
  scroll-behavior: smooth;
}

With Tailwind:

<html class="scroll-smooth">
  <!-- Your content -->
</html>

10. Truncating single line text with truncate

Without Tailwind:

.single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

With Tailwind:

<p class="truncate max-w-xs">
  This is a really long text that will be truncated with an ellipsis
</p>

11. Full viewport height with min-h-screen

Without Tailwind:

.full-height {
  min-height: 100vh;
}

With Tailwind:

<div class="min-h-screen bg-gradient-to-br from-purple-400 to-pink-400">
  Full viewport height content
</div>

12. Backdrop blur effects with backdrop-blur

Without Tailwind:

.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

With Tailwind:

<div class="backdrop-blur-md bg-white/30">
  Glass morphism card
</div>

13. Transform origin center with origin-center

Without Tailwind:

.scale-from-center {
  transform-origin: center;
}

With Tailwind:

<div class="origin-center scale-110 hover:scale-125 transition-transform">
  Scales from center
</div>

14. Pointer events disabled with pointer-events-none

Without Tailwind:

.disabled {
  pointer-events: none;
}

With Tailwind:

<div class="pointer-events-none">
  <button>Disabled button</button>
</div>

15. Object fit cover with object-cover

Without Tailwind:

.hero-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

With Tailwind:

<img class="w-full h-64 object-cover" src="..." alt="..." />

So…

Even if you’re skeptical about Tailwind’s “utility-first” approach, you have to admit, you like ti or not some of these are pretty convenient. Instead of maintaining separate CSS files and remembering obscure property combinations, you get predictable, reusable patterns.

The line-clamp alone has probably saved me hours of searches.

Final thoughts

I’m not saying you need to go full Tailwind today, tomorrow or next month… But next time you’re about to write a complex CSS pattern, maybe check if there’s already a utility for it. Sometimes the “bloated markup” crowd has a point until you realize how much mental overhead these utilities actually eliminate.

And hey, if you’re already using Astro or another modern framework, the integration is seamless anyway.

The question isn’t whether you should use plain CSS or Tailwind. It’s whether you want to keep writing the same CSS patterns from scratch, or use tools that let you focus on the interesting parts of your project. Which at the end of the day is what it actually matters…

/Michael Andreuzza

Did you like this post? Please share it with your friends!