Introduction to Tailwind CSS

Similar to how frontend frameworks evolved from jQuery to React / Vue / Angular to Svelte, so did the world of CSS frameworks. Back in the summer of 2011, Bootstrap CSS revolutionized the CSS world and let you write HTML, such as the following to define a button:

<button type="button" class="btn btn-success">Success</button>

Voilà! Just like that, you had a button (btn) styled with a green background (btn-success) to indicate success. It had hover effects, rounded corners, and all the nice things developers used to spend many hours doing manually before Bootstrap was available. The world loved it, and within months, it seemed like half of the Internet looked pretty much the same: styled with Bootstrap, a background image/video at the top of the homepage with a hero element on top, just like the Bootstrap sample page demonstrated it at that time.

Then, fast-forward ...