Modern CSS with Tailwind, 2nd Edition

Why Tailwind?

Bootstrap or similar CSS frameworks provide CSS classes whose names describe the semantics how they are to be used, like “button” or “card” or “nav.” These classes tend to define a number of CSS styles together.

Tailwind is different.

Nearly all of the basic Tailwind utility classes are thin wrappers around a single CSS style setting, like using m-4 to provide a margin: 1rem or text-lg to change the text size to font-size: 1.125rem.

For example, a button in the Bulma framework can be styled like this:

<button class="button is-primary">Click Me</button>

But in Tailwind, you might use something more like this:

<button
  class="bg-green-500 text-white font-bold
         py-3 px-4 rounded-lg text-center">
  Click Me
</button>

In the Tailwind ...