テキストの配置と装飾

Text Alignment Basics

<p class="text-left">Left-aligned (default for LTR text)</p>
<p class="text-center">Center-aligned (good for headings, CTAs)</p>
<p class="text-right">Right-aligned (good for numbers, dates)</p>
<p class="text-justify">Justified text (edges align to container sides)</p>

When to Use Each Alignment

<div class="text-center mb-8">
  <h1 class="text-4xl font-bold">Centered Hero Headline</h1>
  <p class="text-lg text-gray-500 mt-2">Centered subtitle works for marketing.</p>
</div>
<article class="text-left">
  <p class="text-base text-gray-700 leading-relaxed">
    Body text always reads better left-aligned.
  </p>
</article>

Responsive Text Alignment

<!-- Centered on mobile, left-aligned on large screens -->
<div class="text-center lg:text-left">
  <h1 class="text-3xl font-bold">Responsive Heading</h1>
  <p class="text-gray-500">Aligns with the layout at each breakpoint.</p>
</div>

Text Decoration: Underlines

<a href="#" class="underline text-blue-600">Standard link with underline</a>
<a href="#" class="no-underline text-gray-700 hover:underline">Nav link (underline on hover)</a>
<span class="line-through text-gray-500">$99.00</span>
<span class="text-red-600 font-bold">$59.00</span>

Underline Style and Color

<p class="underline decoration-dotted decoration-indigo-500">Dotted indigo underline</p>
<p class="underline decoration-wavy decoration-red-500 decoration-2">Wavy red underline</p>
<p class="underline decoration-double decoration-4">Double thick underline</p>

Underline Offset

<a href="#" class="underline underline-offset-4 decoration-indigo-600 text-indigo-700 font-medium">
  A clean, offset underline
</a>

Text Transform: Uppercase and Capitalize

<span class="uppercase text-xs font-semibold tracking-wider text-gray-500">
  section label
</span>
<span class="capitalize text-lg font-medium">
  each word gets capitalized
</span>
<button class="uppercase text-sm font-bold tracking-wide">
  get started
</button>

Text Overflow: Truncate and Ellipsis

<!-- Truncate a long title in a card -->
<div class="w-48">
  <p class="truncate text-gray-900 font-medium">
    This is a very long title that will be cut off with an ellipsis
  </p>
</div>

Multi-Line Clamp

<!-- Blog card excerpt: exactly 3 lines -->
<p class="line-clamp-3 text-gray-600 text-sm">
  This is a blog post excerpt that could be much longer.
  It will be clamped to exactly three lines no matter how
  much text is here. The rest is hidden with an ellipsis.
  This fourth line will never be visible.
</p>

White Space Control

<!-- Keep a button label on one line -->
<button class="whitespace-nowrap px-4 py-2 bg-indigo-600 text-white rounded">
  Schedule a Demo
</button>

<!-- Display code with preserved formatting -->
<pre class="whitespace-pre font-mono text-sm bg-gray-100 p-4 rounded">
const x = 1;
const y = 2;
</pre>

Practical: Article Metadata Row

<div class="flex items-center gap-3 text-sm text-gray-500">
  <img src="avatar.jpg" class="w-8 h-8 rounded-full" alt="" />
  <a href="#" class="font-medium text-gray-900 hover:underline">Jane Doe</a>
  <span>&middot;</span>
  <time class="">June 20, 2024</time>
  <span>&middot;</span>
  <span class="uppercase tracking-wide font-semibold text-xs text-indigo-600">
    5 min read
  </span>
</div>

Quick Check

Lesson Recap