What is Tailwind?

Tailwind is a utility-first CSS framework for rapidly building custom designs.

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.

Why Tailwind?

Most CSS frameworks do too much. They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

Tailwind is different.

Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

Resources

Tailwind Documentation

Tailwind Cheatsheet

Example

With Tailwind, we use utility classes to build components.

Here's a button

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

But what if we wanted to expose a CSS class that represents a button, like you'd expect from other frameworks.

For example, if we wanted to build btn class. We can achieve that without writing any CSS properties using Tailwind's @apply syntax.

<button class="btn btn-blue">
  Button
</button>

<style>
.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}
</style>