Styling faster and easier with TailwindCSS

I've been using TailwindCSS for a few months now and find it significantly reduces time when styling elements.

For example, instead of messing around with shadows, trying to get the right distances and blur, you can just throw shadow-(sm|md|lg|xl) on an element (or @apply shadow if using CSS files).

It also helps by reducing the amount of CSS you have to write when you have multiple states, for example:

a {
  color: #123;
}

a:hover {
  color: #321;
  text-decoration-line: underline;
}

a:active {
  color: #456;
}

With TailwindCSS you can write it in a single line:

a {
  @apply text-sky-600 hover:text-sky-500 hover:underline active:text-sky-400;
}

So when it comes to styling a nice card-like element, it's as simple as a few lines:

.card {
  @apply bg-white shadow-md p-5;
}

Things get even better when you want to make elements responsive. The example below will display the element as a row for medium or higher page widths and collapses down to a column display on smaller widths.

.profile-card {
  @apply flex flex-col md:flex-row;
  @apply bg-white text-gray-900 shadow-md p-5;
}