Tailwind CSS Guide

Tailwind CSSRapidly Build Modern Websites

A utility-first CSS framework packed with classes to build custom designs without leaving your HTML.

Contents

Utility-First Fundamentals

Instead of writing custom CSS, Tailwind provides utility classes that you compose to build custom designs.

Traditional CSS

.card {
padding: 1.5rem;
background: white;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Tailwind CSS

<div className="p-6 bg-white rounded-lg shadow">
Card Content
</div>

Common Utility Classes

flex items-center
Flexbox utilities
p-4 m-2
Spacing (padding/margin)
bg-blue-500
Background colors
text-white
Text colors
rounded-lg
Border radius
hover:scale-105
State variants
shadow-lg
Box shadows
font-bold
Typography
jsx
// Utility-First Approach
function Card() {
  return (
    <div className="
      p-6 
      bg-white 
      rounded-lg 
      shadow-lg 
      hover:shadow-xl 
      transition-shadow
    ">
      <h2 className="text-2xl font-bold text-gray-900 mb-2">
        Card Title
      </h2>
      <p className="text-gray-600">
        Card content goes here
      </p>
      <button className="
        mt-4 
        px-4 
        py-2 
        bg-blue-500 
        text-white 
        rounded 
        hover:bg-blue-600 
        transition-colors
      ">
        Click Me
      </button>
    </div>
  );
}

// Spacing Scale
// p-0 = 0px, p-1 = 0.25rem (4px), p-2 = 0.5rem (8px)
// p-4 = 1rem (16px), p-6 = 1.5rem (24px), p-8 = 2rem (32px)

// Color Palette
// bg-red-500, bg-blue-500, bg-green-500
// text-gray-900, text-gray-600, text-gray-400
// border-blue-500, border-gray-300