andersch.dev

dandersch contact [at} andersch {dot) dev
<2025-03-31 Mon>
[ web ]

Tailwind CSS

Tailwind CSS is a CSS framework that provides utility classes (like text-center, p-4, bg-blue-500) to be used directly within the HTML, as an alternative to writing custom CSS.

This approach can lead to more locality of code with reduced context switching and less code (as one avoids writing custom CSS rules for common styling tasks like margins and padding).

Unlike more opinionated frameworks like Bootstrap, Tailwind provides a set of building blocks without dictating the overall look and feel.

Hello World Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Hello World</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white">

  <div class="flex justify-center items-center">
    <div class="bg-blue-500 text-center text-white font-bold py-2 px-4 rounded">
      Hello, World!
    </div>
  </div>

</body>
</html>

tailwind-css-hello-world-example.png

Important Classes

Layout

  • container - Centers and constrains the width of your content.
  • flex - Enable flexbox on an element.
  • flex-row, flex-col - Set direction of flex items.
  • justify-{start,center,end,between,around} - Align flex item along main axis
  • items-{start,center,end,baseline,stretch} - Align flex items along cross axis

Spacing

  • {p,pt,pr,pb,pl}-{size} - Set padding
  • {m,mt,mr,mb,ml}-{size} - Set margin

Sizing

  • w-{size}, w-full, w-screen, w-auto - Sets width.
  • h-{size}, h-full, h-screen, h-auto - Sets height.

Typography

  • text-{size} - Set font size
  • font-{weight} - Set font weight
  • text-{color} - Set text color
  • text-{left,center,right,justify} - Align text

Backgrounds

  • bg-{color} - Set background color
  • bg-cover, bg-contain, bg-center - Control background image behavior

Borders

  • border, border-{size} - Set border width
  • border-{color} - Set border color
  • rounded, rounded-{size} - Set border radius

Effects

  • shadow, shadow-md, shadow-lg - Apply box shadow
  • opacity-{value} - Set opacity

Display

  • block, inline, inline-block, hidden, flex, grid - Control display property

Miscellaneous

  • sm:, md:, lg:, xl:, 2xl: - Prefixes to apply styles at breakpoints
  • hover:, focus: - Apply styles on interaction (hover:bg-blue-700)

Resources