Refactoring From Bootstrap to now Tailwind CSS

When Bootstrap came into existence, it got an overwhelming response from the developer community, the reaction itself tells the story of how much was the need of the hour to have a UI kit for hassle-free frontend development. As it was released, it got trending and kept trending for many days on top. Many of the developers loved it so much that they decided to keep using it in their life.

What is Bootstrap?

Bootstrap is a very powerful and effective framework for designing a responsive and mobile-first website. It has taken web development, especially front-end development to the next level.

Ahh then you will think if Bootstrap is that cool, then why do we refactor from Bootstrap to Tailwind CSS? Why don’t we keep it simple by using and keep evolving as Bootstrap evolves? Why try to make developers’ lives more complex? Hold your thoughts, here is the answer to all your questions.

What’s wrong with Bootstrap?

As of now, we’re completely using Bootstrap as our major CSS framework. Bootstrap always proved to be a go-to tech stack for Front-end developers and it has various variants like react-bootstrap but over time it has been found that most of the time while working on new design components even after using bootstrap we need some support from Custom CSS. 

Well, no one has any issues with writing a custom CSS file but adding a new CSS file in the codebase sometimes costs overall performance. Another problem that is generally faced by developers is when they try to add some new components to the existing codebase. As you might expect to add a new design component it’s getting very difficult day by day to constantly ship. The primary reason behind this is as the company, team, and codebase grow, it’s very difficult to identify which classes used where and for what purpose, where’s the actual CSS and how it’ll affect the overall design.

Besides, as several frontend developers are contributing to the codebase the result of the codebase also tends to increase, which makes the projects’ CSS architecture bulkier and becomes even more difficult to work with.

Soon there comes the time when the developer himself has no idea from which block of CSS is affecting the page. Now as projects continue to progress and whenever a change is requested to the team they keep writing custom CSS and keep overrides, overrides over overrides, by using hacky CSS with important! This ultimately ends up with a hell of a lot of repetitive CSS!

Truth be told…

We do not doubt our team’s ability as they always make things work but in the longer run, it’s one of the main reasons for the barrier to shipping fast. 

At some point, it becomes too difficult to maintain code readability and make new design components without interfering with or breaking existing components. Based on what we felt, we raised a couple of questions while building various versions of the same website:

• What are the things which are disrupting the code and taking so much time?
• Why do we need to write global CSS? 
• What is the need for overrides?

When we kept digging over these questions and after thorough research and analyzing codes we found that most of the modifications and overrides were of CSS’ utility, padding, margin, and other basic CSS properties.

Although Bootstrap itself provides some basic utility classes, customization requires much more utility classes than what it offers. 

Now, we know the problem – the utility class, apart from the set of utility classes provided by Bootstrap itself. To find alternatives and a promising solution we started researching and experimenting with different CSS Frameworks to match our requirements.

This need for transition proves to be a very good opportunity for refactoring our codebase and as well as approach, we took this opportunity with both hands and refactor the complete codebase from Bootstrap to the utility first framework – Tailwind CSS

Now, What is this Tailwind CSS?

Tailwind is a low-level, mostly utility base, fully customizable CSS framework for rapidly building custom user interfaces. The basic idea behind Tailwind is to provide the helm in the hands of developers and let the developer decide how and where they like to head their ships.

It covers almost all the utility classes and allows one to curate new classes when required.

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “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 class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Reactivation of our Website with Tailwind CSS

Now as you have understood the big advantage Tailwind CSS has over bootstrap (basic utility class). We will take a look at how exactly refractor our Website. And What challenges did we face?

Initially, we were not sure whether it would work as per expectation or not! So we have started building it as a clear experiment from scratch. Configured Tailwind CSS with reacts Gatsby js. It has some of the most well-organized and refined documentation. We were able to quickly browse through the documents and find answers to all of our queries. 

We have started creating new components for the website, New components in in-line classes for the first time. It ain’t very eye smoothing, but once you start recognizing the name convention of the tailwind CSS class you will feel that it’s a game. It was really fun and interesting making those code components. And whoop finally we did it with tailwind CSS throughout the code, a fully responsive website, and no custom CSS. It’s hands-on and an awesome experience for developers.

We had seen our previous website code and now seeing this new code, we were really satisfied. The outcomes were unbelievable. There was a very huge reduction in codebase and response time.

What did we learn using Tailwind CSS?

Before Tailwind, we started with CSS, moved to SCSS, and then Bootstrap. During the whole journey, we have a very great experience with each technology. Each new thing teaches us something, and so does the tailwind too.

Working with Tailwind CSS is using a set of predefined utility classes that let you create what you need. This is an excellent way to create more flexible user interfaces with the developer’s creativity in mind.

Advantages

• Modular approach for the class – does exactly one thing.
• Human readable class names make it very easy to understand. For example: `text-white`
• Blazing fast and performant – only include CSS that’s required using the PurgeCSS plugin. Removing all unused utilities in production results in a much smaller CSS bundle.
• Enforce consistent styling across the codebase. Component-level variants like success, error, and warning.
• Refactoring is super easy and safe. Never feel the same about refactoring code that might affect somewhere else in the codebase. 
• Easily customizable and extend as per your need. Write custom utility or add plugins to extend even further.

Disadvantages

• Heavy-weighted HTML – adding many CSS classes bloats the HTML and increases its size resulting in more download time. 
• In other words, It can have an impact on performance. eventually, hurt your lighthouse score.
• Writing long class names inline makes it very difficult to read the HTML markup. 
• Readability can be a major issue. Besides, it makes it harder while develop and debug in dev tools.
• Adding condition-based styling and dynamic CSS class is very complicated.

Next steps in Tailwind CSS

As a next step, we’re planning to implement Just-In-Time: The Next Generation of Tailwind CSS Compiler. As result, we can have 

• Lighting fast build time
• No more PurgeCSS, as style is generated on the fly. CSS is identical in development and production
• Better performance in development

For more updates follow us on Twitter

Check out the Career Opportunities and Get a Chance to Work With Our Geeks