Earlier in web development history the go to solution for building UI was Bootstrap.

Tailwind did'nt feel like a component library like this big opinionated thing forcing us to do stuff in a certain way. It was way more focused just CSS but easier to write and its fully changed my understanding of what the role of libraries in my UI design.

---

Types of UI Libraries

There are three core types of CSS libraries

1. CSS Extension Tools

• Examples: SASS, LESS, and arguably Tailwind
• Description: These are tools designed to extend and enhance the capabilities of Cascading Style Sheets (CSS).

2. Behavior Libraries (also known as Headless UI Libraries)

• Examples: Headless UI, Radix, React Aria, etc.
• Description: Libraries that encode behavior like a dropdown or a button focus and all of the chaotic accessibility types of things behind that

3. Styled System Libraries

• Examples: Tailwind UI, Daisy UI, Mantime
• Description: Styled system libraries offer pre-designed styles and components, streamlining the process of integrating aesthetically pleasing and consistent design elements into web projects.

things like bootstrap that are very much component systems that you apply on top of your DOM

---

People keep asking "Why would I use Tailwind when it's just Bootstrap when I could use MUI instead"

This line of reasoning doesn't make much sense. Tailwind offers a superior approach to handling CSS. I chose Tailwind because I wanted to work with CSS more effectively. I desired a style system that I could customize and make my own. My intention was to build a unique style system using Tailwind, while Bootstrap itself is a pre-established style system.

Certainly, you can customize Bootstrap. However, do you want to spend time tinkering with 50 lines of CSS just to modify button behavior, especially if you've committed to using Bootstrap? Probably not!

Bootstrap provides opinionated, pre-designed components, which can be great if they meet your needs. But historically, people turned to Bootstrap due to a combination of CSS being challenging to write, design principles being hard to grasp, and developers looking for convenience.

The harsh reality is that most companies require some form of component library, whether they create one in-house or install one through npm. Component libraries serve as centralized hubs for maintaining a consistent design language across an application, ensuring that buttons and dropdowns, for example, maintain a uniform appearance throughout.