Why I switched from normal CSS to Tailwind CSS

Tailwind as explained in their official website is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

As a beginner writing pure CSS was very good since it helped in understanding and memorizing the rules needed to achieve a specific layout. I had a lot of experience in doing this, however, none brought me the satisfaction and productivity boost that TailwindCSS has.

Tailwind has a very basic syntax.

Here is an example of how it looks like:

<figure class="bg-gray-100 rounded-xl">
  <img class="w-32 h-32" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 space-y-4">
    <blockquote>
      <p class="text-lg">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption>
      <div>
        Sarah Dayan
      </div>
      <div>
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Each class represents a CSS declaration. In the example above pt-6 represents padding-top: 1.5rem;

This will generate the following:

Tailwind has a myriad of benefits compared to custom CSS

Some of the things I found interesting about Tailwind are:

No need to leave your HTML code

Writing code in one place can be faster and more interesting other than jumping from files to files, this can help to focus more on the task at hand.

At times this may become messy especially when working on large projects.

Smaller Styles

Tailwind guarantees a consistent bundle size since utility class names can be shared between elements.

For unused CSS, Tailwind is paired with purge CSS this removes extra classes on the codebase.

Higher Productivity

Writing Tailwind CSS is much faster compared to writing CSS or CSS-in-JS. Text editors and IDEs automatically helps us with the autocomplete and formatting, however, in order to trigger the autocomplete we have to write the selectors and pieces of declarations.

In addition, variants in Tailwind have prefixes which can be added to classes, representing a specific CSS pseudo-class or custom plugins.

Consistency

Also, Tailwind has a lot of pre-built classes mainly for sizing and coloring, this will reduce or completely remove the need to implement a design system.

Customization

Developers can extend or modify classes in the tailwind.config.js file. One can tamper right into Tailwind and can also add custom plugins , changes made will be reflected in the final stylesheet.

Inside this file, one can create normal CSS classes.

Tailwind Drawbacks

Some of the things I may disagree with Tailwind:

Readability

When a considerate amount of classes are added to an element, it may become daunting to read.

With correct component abstractions this can be easily solved.

Complex Animations

Archiving complex animations is very hard.

One would have to create a class for each element in order to use plain CSS, this will end up in doing more work.

Use of libraries can also be used to solve this.

Some CSS properties are not included.

My Final Thoughts

In my journey Tailwind has helped in increasing my productivity, reducing the bundle size of my apps and made me more consistent.

Although it may have worked well for me and many other developers, it doesn't mean it is the perfect solution for every project.

Us front-end developers as long as we guarantee maintainability, scalability, and performance, Tailwind is definitely the best solution considering its myriad of benefits.