Categories
Opinions

A Case for tailwind

  • A set of tooling that allow us to write ✍️ utility first classes
  • Write css that is consistent between the teams.

I am gonna start fresh, I am will write semantic CSS. The

You have a blog title that is different than other titles, little bigger, with underline. So I will use class like .blog-title now all of the styles goes here.

But then you  have to have design .page-title, another heading that might share styles but without underline. Now I have to rewrite some of styles.

Now may be I have more titles, now I have to rewrite again and again. This road lead to duplication. Our semantic styles starts to crumble. Especially in a team and keeping them to wrote semantic styles. No matter how hard you try to impose this rule, you can’t get perfect at it. You will go off the rails.

We want to seek the goal of perfection but than their is reality that we have achieve, some major feature we need to release.

Separation of concerns

We are already writing our CSS and HTML in JavaScript. Would I go for putting css in separate file or, when I can see both the markup and css on same page.

We are using templating engines any way, they will wrap our css into components.

All of the responsive style, dark mode, hover are one the same page with tailwind classes.

You can customize

Every thing customisable, you know when site is built with bootstrap, tailwind comes with default theme but you can customise the color, font sizes, spacing. Completely reskin the app with little effort.

Your customized tailwind configuration can serve your design system.

Tailwind is postcss extension. It uses purge css, which at build time scan the files to see what css classes are used and only include them in the final (all regex). Part of resistance over high order classes, is that now the classes that is used by high order class is referenced but it does not guarantee that high order class is by itself referenced

Tailwind classes aren’t that many, they are easy to remember because there is easy heuristic to it.

Tailwind Optimizes

We have practical use case, as tailwind help you provide a smallest CSS bundle.

I being follower of Semantic styles, now I write same styles over and over with different names. Now these are bunch of classes that needs to be shipped in final bundle. That all do the exact same thing. It will be a little easier

Make this text extra large

I that case only text-lg will be shipped.

No matter how Tailwind advocates itself on some of the high order components but you can still

But we can still bend the rules

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.