Tailwind CSS

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

Building complex components from a constrained set of primitive utilities.

Overview

You style things with Tailwind by combining many single-purpose presentational classes (utility classes) directly in your markup:

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
  <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
  <div>
    <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
    <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
  </div>
</div>

For example, in the UI above we've used:

• The display and padding utilities (flex, shrink-0, and p-6) to control the overall layout

• The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally

• The background-color, border-radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card's appearance

• The width and height utilities (size-12) to set the width and height of the logo image

• The gap utilities (gap-x-4) to handle the spacing between the logo and the text

• The font-size, color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text