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 to the end of 2017 when the first release of Tailwind CSS was released.

Tailwind CSS

If we read the documentation for Tailwind:

"Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override."

We highly recommend taking a minute to visit the Tailwind CSS website and watching the short animation of how it works. For now, all you need to understand is the concept. We will dive deeper into individual building blocks in the upcoming lessons. The following are some of the most important resources for Tailwind CSS:

Tailwind UI

The Tailwind team launched Tailwind UI, which takes the utility classes to the next level. In short, the team develops UI components you can copy and paste into your own project to get it up and running in no time.

Tailblocks

This is an open-source collection of 60+ Tailwind CSS components developed by Mert. Check out the components at this link where you can also find a link to the source code.

Tailwind toolbox

Tailwind Toolbox is another open-source collection of components and pages.

Alternatives

Let’s explore the alternatives to Tailwind CSS.

Bootstrap

Bootstrap is a very popular HTML, CSS, and JavaScript frontend framework that has been around since 2011.

CSS modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. This is the approach that developers used before moving to Svelte with Tailwind CSS where styles are also local by default.

Atomic CSS

Atomic CSS enables you to style directly in your components, avoiding the headache of managing stylesheets.

Your own CSS

Using your own CSS is also an option, and there are legitimate reasons to do that. Before you decide to go down that path, ask yourself how this may impact the project down the road, for example, when new team members join or when you need to support new (or old) browsers.

There are many other libraries, and the above list is by no means exhaustive. Simply search online for “CSS frameworks,” and you will find many more approaches to styling a web application.

Why choose Tailwind CSS?

Tailwind answers this question best on their website:

"... highly customizable ...".

With minimal effort, and especially in combination with a JavaScript framework that focuses on reusable components, you are able to create good-looking websites in a fraction of the time it would take when you write CSS from scratch.

Additionally, you are not required to come up with names for your CSS classes. It is less cognitive load and lets you focus on more important tasks. Anyone who understands Tailwind CSS is up and running with your project in a very short amount of time.

To learn more interesting details about Tailwind CSS, we recommend reading an interesting article by Adam Wathan, the creator of Tailwind CSS.

Tailwind CSS in your web app

The most recent estimate of available options to style your web applications is similar to the number of sand grains on the beaches around the Pacific Ocean.

In the upcoming lessons, we will dive in and learn why Tailwind CSS and how to use it for your Svelte and Sapper web application.

We highly recommend you open the Tailwind CSS website now and have a look at the animated GIF that illustrates the power of utility classes.

Get hands-on with 1200+ tech skills courses.