Tailwind

Tailwind CSS is a utility CSS framework. Utility CSS framworks provide a set of utility classes which are assigned directly in the HTML code. In comparison a component based CSS framework (like Bootstrap) provides complete components.

Example for Component CSS Framework:

<div class="card"> ... </div>

Tailwind Example:

<div class="md:flex rounded-xl p-8 md:p-0"> ... </div>

CSS class explanation:

  • md:flex : Enable flexbox for breakpoint md
  • rounded-xl : Rounded corners with radius 0.75rem / 12px
  • p-8 : Padding 2rem
  • md:p-0 : No Padding for breakpoints >= md

References