Skip to content

What I learned by migrating to Tailwind CSS

Posted on:December 31, 2022 at 11:11 AM

You likely heard a lot about Tailwind CSS which everyone seems going gaga over. My first impressions of Tailwind CSS reminded me of inline styles. I was skeptical.

I had a situation that lead me to try out Tailwind CSS in an act of desperation. My blog needed a makeover and I only had a little spare time.

My first attempt at styling using a CSS-In-JS library was a disaster. Will Tailwind CSS come to the rescue and save the day?

Before settling on Tailwind CSS I evaluated the following styling approaches:


A popular approach for styling. CSS and JavaScript code are colocated. It eliminates CSS bloat and global CSS. The bad parts are:

Semantic Classes

Relies on CSS class names to style objects. CSS is generated at build time and has no run time cost. The bad parts are:

Pre-processors like SASS were created to workaround CSS limitations.

CSS Modules

An improvement over Semantic classes to reduce bloat and global CSS.

My learnings on Tailwind CSS

For my blog, I decided to give Tailwind CSS a fair try. Here are my learnings after completing the migration:

Utility classes are empowering

Tailwind CSS is a utility-first CSS framework. You can safely refactor styles without introducing breaking changes in other components. No more inventing silly class names and global CSS. Built-in utility class names match closely with standard CSS features. As an added bonus the size of the CSS stays the same as your code scales.

No runtime cost

CSS is generated at build time.


Tailwind CSS CLI optimizes the generated CSS file to only include the utility classes that you have used. The CSS file stays under 10Kb for most websites.

Truly mobile-first and responsive

The utility classes by default are mobile-first. You can easily make them responsive by prefixing them with a responsive breakpoint.

<div class="p-2 sm:p-3 md:p-4">
  Tailwind CSS

Example: The utility class p-2 adds a padding of 2 units for all breakpoints. At the small (sm) breakpoint, the padding increases to 3 units, and at the medium (md) breakpoint increases to 4 units.

Predefined design system

Tailwind CSS comes with an opinionated set of base styles, colors, spacing, and a theme. You can immediately start building your website and quickly get productive.

Configurable and extendable

You can easily configure Tailwind CSS to override the theme and extend it with plugins and presets.

Tailwind CSS is solid

If you want to be productive and have a scalable styling solution then check out Tailwind CSS. I was able to learn it quickly and migrate my blog in a few hours. Tailwind CSS documentation is a great resource to get started. I am going to end this post with a tweet from Sarah Dayan.