Why Tailwind CSS changed how I write UI

For years, I used SCSS with BEM. It worked - but I always had to think too much:

  • “What should I name this class?”
  • “Where did I define that style again?”
  • “Should I create a new file or reuse an existing one?”

Then I tried Tailwind CSS, and I never looked back.

Why Tailwind just works

Instead of naming your styles, you just write them. Tailwind gives you small, meaningful utility classes that do exactly what they say:

<button class="bg-blue-500 text-white px-4 py-2 rounded shadow">
  Save
</button>

No thinking about .btn, .btn--primary, or whether button.scss exists. The class describes exactly what it does - nothing hidden.

No more naming classes

With BEM, naming takes time:

// SCSS + BEM
.card {}
.card__title {}
.card--highlighted {}

In Tailwind, you build everything with utilities:

<div class="bg-white p-4 rounded shadow text-lg font-semibold">
  Hello World
</div>
  • No mental overhead
  • No guessing where styles live
  • No switching files or scrolling through CSS just to see padding or colors

Utility classes describe the result

Tailwind classes are like LEGO bricks - you snap them together to create the exact shape and feel.

p-5 → padding: 1.25rem

text-sm → font-size: small

rounded-lg → large border radius

shadow-md → medium shadow

You don’t need to open a CSS file to understand the design. The markup is the style.

Flexible components with props

Tailwind also shines when creating variant-based components. You don’t have to duplicate entire CSS blocks — just pass variant classes via props.

Example (Vue or React-style):

const variants = {
  primary: 'bg-blue-600 text-white',
  secondary: 'bg-gray-200 text-black',
};

<Button className={`px-4 py-2 rounded ${variants[props.variant]}`} />

Your components are now highly composable and easy to extend.

Consistency without variables

Tailwind makes design consistency easy. Instead of writing:

padding: 20px; // or 1.25rem

You just use p-5, which maps to a consistent spacing scale defined in your config.

This means:

  • No more one-off pixel values

  • Easier handoff between devs

  • Designs stay aligned across pages

Tailwind’s naming encourages reuse of the design system - without enforcing it.

Superpowers: space, gap, aspect, and more

Tailwind comes with utilities that would be annoying to write by hand:

space-x-4 – applies consistent horizontal margin between children

gap-6 – for grid/flex layouts

aspect-video – force an element into 16:9 ratio

line-clamp-2 – truncate text with ...

divide-y – add borders between children

grid-cols-3, flex, items-center, justify-between - layout magic

You can build full responsive layouts without ever leaving the HTML file.

Result: less friction, more speed

With Tailwind:

  • I build faster

  • I don’t name things

  • I don’t context-switch between markup and CSS

  • I don’t scroll through files

  • My components are more reusable

  • My design is more consistent

  • My bundle is smaller (thanks to PurgeCSS)

Conclusion

Tailwind CSS isn’t just a styling tool - it’s a complete mindset shift.

It makes UI code:

  • Descriptive

  • Consistent

  • Compositional

  • Predictable

If you’ve ever struggled to keep your styles clean, organized, and fast to iterate - give Tailwind a serious try. You might never want to write traditional CSS again.

Bartłomiej Nowak

Bartłomiej Nowak

Programmer

Programmer focused on performance, simplicity, and good architecture. I enjoy working with modern JavaScript, TypeScript, and backend logic — building tools that scale and make sense.

Recent Posts