Typography and Spacing

<!-- Sans-serif font (default UI font) -->
<p class="font-sans">This text uses a sans-serif font.</p>

<!-- Serif font -->
<p class="font-serif">This text uses a serif font.</p>

<!-- Monospace font -->
<p class="font-mono">This text uses a monospace font.</p>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: ["Poppins", "sans-serif"],
        body: ["Inter", "sans-serif"],
        heading: ["Playfair Display", "serif"],
        code: ["Fira Code", "monospace"],
      },
    },
  },
};

<h1 class="font-heading">Beautiful Heading</h1>
<p class="font-body">This is the body text using Inter.</p>
<code class="font-code">const code = 'formatted';</code>

<p class="text-xs">Extra small text (12px)</p>
<p class="text-sm">Small text (14px)</p>
<p class="text-base">Base text (16px)</p>
<p class="text-lg">Large text (18px)</p>
<p class="text-xl">Extra large text (20px)</p>
<p class="text-2xl">2XL text (24px)</p>
<p class="text-3xl">3XL text (30px)</p>
<!-- ... up to text-9xl -->

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        base: ["16px", "24px"], // 16px font size, 24px line height
        lg: ["18px", "28px"],
        xl: ["20px", "32px"],
        // More complex configuration with letter spacing
        display: [
          "64px",
          {
            lineHeight: "72px",
            letterSpacing: "-0.02em",
            fontWeight: "700",
          },
        ],
      },
    },
  },
};

<p class="font-thin">Thin text (100)</p>
<p class="font-extralight">Extra light text (200)</p>
<p class="font-light">Light text (300)</p>
<p class="font-normal">Normal text (400)</p>
<p class="font-medium">Medium text (500)</p>
<p class="font-semibold">Semi-bold text (600)</p>
<p class="font-bold">Bold text (700)</p>
<p class="font-extrabold">Extra bold text (800)</p>
<p class="font-black">Black text (900)</p>

<p class="text-left">Left-aligned text</p>
<p class="text-center">Center-aligned text</p>
<p class="text-right">Right-aligned text</p>
<p class="text-justify">
  Justified text that aligns along the left and right edges
</p>

<p class="text-black">Black text</p>
<p class="text-white">White text</p>
<p class="text-gray-500">Medium gray text</p>
<p class="text-red-600">Bright red text</p>
<p class="text-blue-700">Dark blue text</p>
<p class="text-green-500">Medium green text</p>
<!-- And many more colors with different intensities (100-900) -->

<p class="text-blue-500 text-opacity-100">100% opacity</p>
<p class="text-blue-500 text-opacity-75">75% opacity</p>
<p class="text-blue-500 text-opacity-50">50% opacity</p>
<p class="text-blue-500 text-opacity-25">25% opacity</p>

<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<p class="no-underline">No underline (removes underline)</p>

<!-- Decoration color -->
<p class="underline decoration-blue-500">Blue underline</p>

<!-- Decoration style -->
<p class="underline decoration-dotted">Dotted underline</p>
<p class="underline decoration-dashed">Dashed underline</p>
<p class="underline decoration-wavy">Wavy underline</p>

<!-- Decoration thickness -->
<p class="underline decoration-2">Thicker underline</p>
<p class="underline decoration-4">Even thicker underline</p>

<p class="uppercase">all uppercase</p>
<p class="lowercase">ALL LOWERCASE</p>
<p class="capitalize">capitalize each word</p>
<p class="normal-case">Normal case (resets transformations)</p>

<p class="tracking-tighter">Tighter letter spacing</p>
<p class="tracking-tight">Tight letter spacing</p>
<p class="tracking-normal">Normal letter spacing</p>
<p class="tracking-wide">Wide letter spacing</p>
<p class="tracking-wider">Wider letter spacing</p>
<p class="tracking-widest">Widest letter spacing</p>

<p class="leading-none">Leading none (1)</p>
<p class="leading-tight">Tight leading (1.25)</p>
<p class="leading-snug">Snug leading (1.375)</p>
<p class="leading-normal">Normal leading (1.5)</p>
<p class="leading-relaxed">Relaxed leading (1.625)</p>
<p class="leading-loose">Loose leading (2)</p>

<!-- Fixed line heights -->
<p class="leading-3">0.75rem line height</p>
<p class="leading-4">1rem line height</p>
<!-- ... and so on -->

<!-- Truncate text with ellipsis -->
<p class="truncate w-48">
  This text is too long and will be truncated with an ellipsis.
</p>

<!-- Allow text to wrap -->
<p class="overflow-auto w-48">
  This text will wrap to the next line when it reaches the width of the
  container.
</p>

<!-- Prevent text from wrapping -->
<p class="whitespace-nowrap overflow-hidden w-48">
  This text won't wrap and will be clipped.
</p>

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [require("@tailwindcss/typography")],
};

<article class="prose lg:prose-xl">
  <h1>Article Heading</h1>
  <p>
    This is a paragraph with <strong>bold text</strong> and
    <em>italic text</em>.
  </p>
  <ul>
    <li>List item one</li>
    <li>List item two</li>
  </ul>
  <blockquote>This is a blockquote</blockquote>
</article>

<!-- All sides -->
<div class="p-0">No padding</div>
<div class="p-1">0.25rem padding (4px)</div>
<div class="p-2">0.5rem padding (8px)</div>
<div class="p-4">1rem padding (16px)</div>
<div class="p-8">2rem padding (32px)</div>

<!-- Individual sides -->
<div class="pt-4">Padding top</div>
<div class="pr-4">Padding right</div>
<div class="pb-4">Padding bottom</div>
<div class="pl-4">Padding left</div>

<!-- Horizontal and vertical -->
<div class="px-4">Padding left and right</div>
<div class="py-4">Padding top and bottom</div>

<!-- All sides -->
<div class="m-0">No margin</div>
<div class="m-1">0.25rem margin (4px)</div>
<div class="m-2">0.5rem margin (8px)</div>
<div class="m-4">1rem margin (16px)</div>
<div class="m-8">2rem margin (32px)</div>

<!-- Individual sides -->
<div class="mt-4">Margin top</div>
<div class="mr-4">Margin right</div>
<div class="mb-4">Margin bottom</div>
<div class="ml-4">Margin left</div>

<!-- Horizontal and vertical -->
<div class="mx-4">Margin left and right</div>
<div class="my-4">Margin top and bottom</div>

<!-- Auto margins (for centering) -->
<div class="mx-auto w-1/2">Horizontally centered with auto margins</div>

<div class="-m-4">Negative margin on all sides</div>
<div class="-mt-4">Negative margin top</div>
<div class="-mr-4">Negative margin right</div>
<!-- And so on... -->

<!-- Horizontal spacing between children -->
<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Vertical spacing between children -->
<div class="flex flex-col space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Reverse spacing direction -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Grid with gap -->
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Different row and column gaps -->
<div class="grid grid-cols-3 gap-x-8 gap-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Flex with gap -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      // Override the entire spacing scale
      0: "0",
      1: "4px",
      2: "8px",
      3: "12px",
      4: "16px",
      5: "20px",
      6: "24px",
      // ... and so on
    },
    // Or extend the default scale
    extend: {
      spacing: {
        72: "18rem",
        84: "21rem",
        96: "24rem",
        128: "32rem",
      },
    },
  },
};

Padding and Margin Visualization:

┌───────────────────────────────────────────┐
│                  Margin                    │
│   ┌───────────────────────────────────┐   │
│   │              Padding               │   │
│   │   ┌───────────────────────────┐   │   │
│   │   │                           │   │   │
│   │   │         Content           │   │   │
│   │   │                           │   │   │
│   │   └───────────────────────────┘   │   │
│   │                                   │   │
│   └───────────────────────────────────┘   │
│                                           │
└───────────────────────────────────────────┘

Classes:
- Content: The element itself
- Padding: p-{size}, pt-{size}, pr-{size}, pb-{size}, pl-{size}, px-{size}, py-{size}
- Margin: m-{size}, mt-{size}, mr-{size}, mb-{size}, ml-{size}, mx-{size}, my-{size}

<!-- Bad: Inconsistent, arbitrary spacing -->
<div class="p-3 mb-7 mt-5">
  <h2 class="mb-3.5">Heading</h2>
  <p class="mb-6">Content</p>
</div>

<!-- Good: Consistent spacing using the scale -->
<div class="p-4 mb-8 mt-6">
  <h2 class="mb-4">Heading</h2>
  <p class="mb-6">Content</p>
</div>

<!-- Bad: Mixing Tailwind with custom CSS -->
<div class="p-4" style="margin-bottom: 22px;">Content</div>

// Good: Extend the config if you need custom values
module.exports = {
  theme: {
    extend: {
      spacing: {
        22: "5.5rem", // 88px
      },
    },
  },
};

<div class="p-4 mb-22">Content</div>

<article class="max-w-2xl mx-auto p-6">
  <h1 class="font-bold text-3xl md:text-4xl text-gray-900 mb-4 leading-tight">
    Main Heading for Blog Post
  </h1>

  <h2 class="font-semibold text-xl md:text-2xl text-gray-800 mb-6 leading-snug">
    Subheading that provides additional context
  </h2>

  <p class="text-base text-gray-700 mb-6 leading-relaxed">
    Body text that forms the main content of the article. This should be highly
    readable with good line height and comfortable font size. Links within the
    text should be
    <a href="#" class="text-blue-600 hover:text-blue-800 underline"
      >clearly distinguishable</a
    >
    from regular text.
  </p>

  <figure class="mb-6">
    <img
      src="https://via.placeholder.com/800x400"
      alt="Example image"
      class="rounded-lg"
    />
    <figcaption class="text-sm text-gray-500 mt-2 italic">
      Caption text for images or additional information that's secondary to the
      main content.
    </figcaption>
  </figure>

  <p class="text-base text-gray-700 mb-6 leading-relaxed">
    More body text to demonstrate the consistency of the typography system
    across multiple paragraphs and sections.
  </p>
</article>

<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white">
  <!-- Card image -->
  <img
    class="w-full h-48 object-cover"
    src="https://via.placeholder.com/400x200"
    alt="Card image"
  />

  <!-- Card content -->
  <div class="px-6 py-4">
    <h3 class="font-bold text-xl mb-2 text-gray-800">Card Title</h3>
    <p class="text-gray-600 text-base mb-4">
      This is the card description with properly spaced content. The spacing
      between elements creates a comfortable reading experience.
    </p>
  </div>

  <!-- Card tags -->
  <div class="px-6 pt-2 pb-4">
    <span
      class="inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
      >#photography</span
    >
    <span
      class="inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
      >#travel</span
    >
  </div>

  <!-- Card actions -->
  <div
    class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex justify-end space-x-2"
  >
    <button
      class="px-4 py-2 bg-gray-200 text-gray-800 text-sm font-medium rounded-md hover:bg-gray-300"
    >
      Cancel
    </button>
    <button
      class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded-md hover:bg-blue-600"
    >
      View
    </button>
  </div>
</div>

<h1
  class="
  font-bold 
  text-2xl leading-tight tracking-tight 
  md:text-3xl md:leading-tight 
  lg:text-4xl lg:leading-tight 
  xl:text-5xl xl:leading-tight 
  text-gray-900
"
>
  This heading adjusts its size, line height, and tracking responsively
</h1>

<p
  class="
  mt-4 
  text-base leading-relaxed 
  md:text-lg md:leading-relaxed 
  lg:text-xl lg:leading-relaxed 
  text-gray-700
"
>
  This paragraph also adjusts its typography based on screen size, ensuring
  optimal readability across devices from mobile to desktop.
</p>