Tailwind CSS is a CSS library that provides a "vocabulary" of predefined utility CSS classes. Combining these classes you can achieve most visual designs without having to switch from your JSX files to the CSS files and back. Also, since Tailwind stadardizes on sizes, colors, and many other features, you don't have to fine-tune things every time.

Here are some example of the available classes in Tailwind:

Basically, Tailwind saves a lot of time, because if you learn about the available classes (a sort of vocabulary), then you can express what you need very quickly. At the same time, being very precise about the styles of things involves writing a lot of classes in JSX elements and therefore, readability suffers somewhat (like most things, this is a tread-off).

<div className="rounded relative transition-all overflow-clip bg-card">
  <h4
    className={
      "cursor-pointer flex flex-row items-center gap-1" +
      "text-sm hover:bg-black hover:bg-opacity-5 opacity-70" +
      "mb-0 py-3 sm:py-1 pl-4 sm:pl-2"
    }
  >
    {/* ... */}
  </h4>
</div>

Utility classes

Most pre-defined classes in tailwind affect combine two or three parts joined by dashes (-) as in: m-1, p-1, w-1 or h-1. The first letter is a shorthand for some CSS property, and after the dash goes a size. Here are the most common properties using this style:

VSCode Extensions

Code completion and suggestions: To work efficiently with Tailwind, it is important to be able to write inside className attributes and get suggestions on what classes are available as a function of what you type, so that you can quickly discover things. In VSCode, this can be achieved installing the Tailwind CSS IntelliSense extension.

Hiding Tailwind classes: Since the className attribute of many components can get very large, this can be distracting, so the Tailwind Fold extension hides those parts of the code and only shows them while the cursor is inside them.