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?
Popular styling approaches
Before settling on Tailwind CSS I evaluated the following styling approaches:
CSS-In-JS
A popular approach for styling. CSS and JavaScript code are colocated. It eliminates CSS bloat and global CSS. The bad parts are:
- Added run time cost that can impact SEO performance.
- Steep learning curve.
- Increased complexity of Server Side Rendering.
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:
- The styling code is separate from JavaScript and can cause CSS bloat
- Use of global CSS.
- Coming up with meaningful CSS class names is hard and leads to inconsistency. Conventions such as BEM and style guides were developed to address this problem.
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.
Production-ready
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
</div>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.
