Tailwind CSS Academy · บทเรียน

ขนาดและน้ำหนักตัวอักษร

ใช้ text-sm ถึง text-9xl และ font-thin ถึง font-black เพื่อควบคุมความโดดเด่นทางภาพของข้อความ

ขนาดและน้ำหนักตัวอักษร เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Tailwind's Font Size Scale

Set text size with the text-* scale, from text-xs up to text-9xl. Pick from these steps instead of typing pixels, and your typography stays consistent.

<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>

Display and Hero Text Sizes

For big display text on hero sections, reach for text-7xl, text-8xl, or text-9xl. Pair them with font-extrabold and tracking-tight for headlines that grab attention.

<h1 class="text-7xl font-black tracking-tight text-gray-900">
  Make it big.
</h1>

Font Weight Utilities

Control thickness with font weight: font-normal for body, font-semibold for labels, font-bold for headings, and font-extrabold or font-black for big emphasis.

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

Combining Size and Weight

Size and weight are independent, so they team up: text-sm font-medium for a nav label, text-4xl font-bold for a heading. Together they build hierarchy.

<!-- Article typographic hierarchy -->
<h1 class="text-4xl font-bold text-gray-900 mb-2">Main Headline</h1>
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Section Title</h2>
<p class="text-base font-normal text-gray-600 mb-2">Body paragraph text...</p>
<span class="text-xs font-medium text-gray-400">Caption or metadata</span>

Responsive Font Sizes

Type can scale with the screen. Add a breakpoint prefix like md: to any size — text-3xl md:text-5xl is small on phones and large on desktops.

<h1 class="text-2xl md:text-4xl lg:text-6xl font-extrabold text-gray-900">
  Scales with the screen
</h1>

Font Style: Italic

Add italic to slant text and not-italic to reset it. It is great for quotes and citations — italic font-light text-gray-500 gives that classic testimonial feel.

<blockquote class="italic font-light text-gray-500 text-lg border-l-4 border-indigo-400 pl-4">
  'Tailwind makes styling enjoyable again.'
</blockquote>
<cite class="text-sm font-medium text-gray-700">— A happy developer</cite>

Font Variant Numeric

For numbers, tabular-nums makes every digit the same width, so prices and stats line up neatly in tables and columns. A small touch that looks very tidy.

<!-- Tabular numbers align in columns -->
<table>
  <tr>
    <td class="tabular-nums text-right">1,234.56</td>
  </tr>
  <tr>
    <td class="tabular-nums text-right">98,765.00</td>
  </tr>
</table>

Practical: Navigation Typography

Nav links love a small, medium look: text-sm font-medium. Mark the active link by bumping it to font-semibold text-indigo-600 so it stands apart.

<nav class="flex gap-6">
  <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Home</a>
  <a href="#" class="text-sm font-semibold text-indigo-600">Products</a>
  <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">About</a>
</nav>

Practical: Article Body Text

Comfortable body text is text-base or text-lg with relaxed spacing and text-gray-700, not harsh black. Add max-w-prose to keep lines at an easy reading width.

<article class="max-w-prose mx-auto">
  <p class="text-lg font-normal text-gray-700 leading-relaxed">
    This is body text set at a comfortable reading size.
    The max-w-prose constraint keeps lines short enough
    to read without losing your place.
  </p>
</article>

Practical: Data Display Typography

For dashboards, make numbers pop: text-3xl font-bold text-gray-900 for a value, with a smaller text-sm uppercase tracking-wider label above it.

<div class="text-center">
  <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
    Total Users
  </p>
  <p class="text-3xl font-bold text-gray-900 tabular-nums">
    24,781
  </p>
</div>

Common Font Size Reference

A quick mental map: text-xs for captions, text-base for body, text-2xl to text-4xl for headings, text-5xl and up for hero text. Match each with the right weight.

Quick Check

Quick check! See how size and weight stuck. 🔤

Lesson Recap

Nice! text-* controls size, font-thin through font-black sets weight, and mixing size, weight, and color builds hierarchy. Next up: text color and opacity.

คำถามที่พบบ่อย

บทเรียน “ขนาดและน้ำหนักตัวอักษร” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ขนาดและน้ำหนักตัวอักษร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ขนาดและน้ำหนักตัวอักษร”

ใช้ text-sm ถึง text-9xl และ font-thin ถึง font-black เพื่อควบคุมความโดดเด่นทางภาพของข้อความ คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ขนาดและน้ำหนักตัวอักษร” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Tailwind CSS Academy