Tailwind CSS Academy · บทเรียน

องค์ประกอบป้ายและแท็ก

ออกแบบป้ายขนาดเล็กรูปทรงแคปซูลสำหรับตัวบ่งชี้สถานะ แท็กหมวดหมู่ และจำนวนการแจ้งเตือน ด้วยพื้นหลังที่ใช้สีแยกประเภท

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

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

What Are Badges and Tags

Badges are small, compact visual labels that communicate status, counts, or categories at a glance. Tags are typically user-applied labels for filtering and classification, while status badges indicate state like Active, Pending, or Archived.

In Tailwind, both are built with the same core structure: a small amount of padding, a rounded-full or rounded-md border radius, a background color, and small text. The entire component requires zero custom CSS.

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
             bg-green-100 text-green-800">
  Active
</span>

Pill-Shaped Status Badges

Pill badges use rounded-full for fully rounded ends, which gives them a distinctive shape that stands out from rectangular content. The standard approach pairs a light background tint with a darker text shade from the same color family.

For example, bg-green-100 text-green-800 creates a soft green badge that reads clearly at small sizes. Use px-2.5 py-0.5 for compact padding and text-xs font-medium for a readable label.

<!-- Different status badges -->
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pending</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Rejected</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">Archived</span>

Solid Color Badges

For higher contrast situations, solid badges use a fully saturated background like bg-blue-600 with text-white. These work well on dark backgrounds or when the badge needs to compete visually with other elements.

Solid badges are common for notification counts, version labels (like New or Beta), and category markers on feature flags or changelogs.

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-600 text-white">New</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-purple-600 text-white">Beta</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-red-600 text-white">Hot</span>

Notification Count Badge

A notification count badge overlaps a button or icon to show unread items. Position it absolutely relative to its parent with relative on the container and absolute -top-1 -right-1 on the badge.

Use w-5 h-5 flex items-center justify-center for a perfectly circular badge at small sizes. Hide the badge when the count is zero using conditional rendering or the hidden utility.

<div class="relative inline-flex">
  <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg" aria-label="Notifications">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
    </svg>
  </button>
  <span class="absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center
               rounded-full bg-red-600 text-white text-xs font-bold">
    3
  </span>
</div>

Dot Indicator Badges

A dot badge conveys status without text — just a small colored circle. Combine w-2.5 h-2.5 rounded-full with a background color to create a dot, and place it beside text using inline-flex items-center gap-1.5.

Dot indicators are ideal for showing online/offline presence, real-time sync status, or which environment (production vs staging) a record belongs to.

<div class="flex flex-col gap-2">
  <div class="inline-flex items-center gap-1.5 text-sm text-gray-700">
    <span class="w-2.5 h-2.5 rounded-full bg-green-500"></span>
    Online
  </div>
  <div class="inline-flex items-center gap-1.5 text-sm text-gray-700">
    <span class="w-2.5 h-2.5 rounded-full bg-yellow-400"></span>
    Away
  </div>
  <div class="inline-flex items-center gap-1.5 text-sm text-gray-700">
    <span class="w-2.5 h-2.5 rounded-full bg-gray-400"></span>
    Offline
  </div>
</div>

Outline and Border Badges

An outline badge uses a border instead of a background fill: border border-blue-500 text-blue-600 with a transparent or very light background. This creates a subtle label that does not compete with filled elements nearby.

Add bg-transparent (or omit any bg- class) and use ring-1 ring-inset ring-blue-500 for an alternative approach that gives you more control over the ring thickness.

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
             border border-blue-500 text-blue-600">
  Design
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
             border border-purple-500 text-purple-600">
  Engineering
</span>

Tags With Remove Button

Filter tags often need a remove (×) button so users can dismiss them. Build a tag as an inline-flex items-center gap-1 container holding the label and a small icon button.

The remove button uses ml-1 text-gray-500 hover:text-gray-900 and a small ×, ensuring it is easy to click without being visually dominant. This pattern is common in search filters, skill tags, and multi-select inputs.

<div class="flex flex-wrap gap-2">
  <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium
               bg-blue-100 text-blue-700">
    React
    <button type="button" class="text-blue-500 hover:text-blue-800 ml-0.5" aria-label="Remove React">
      &times;
    </button>
  </span>
  <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium
               bg-purple-100 text-purple-700">
    TypeScript
    <button type="button" class="text-purple-500 hover:text-purple-800 ml-0.5" aria-label="Remove TypeScript">
      &times;
    </button>
  </span>
</div>

Badges With Icons

Adding a small icon before the badge label adds visual context without requiring the user to read the text. Use inline-flex items-center gap-1 and an SVG at w-3 h-3 to keep the icon proportional to the badge text.

A checkmark icon on a green badge, a clock on a yellow badge, and an X on a red badge communicate status semantically through both color and shape.

<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
  </svg>
  Verified
</span>

Rounded Square Tag Style

Not all badges need fully rounded corners. A square tag with rounded-md instead of rounded-full looks more structured and works well for technology labels, version numbers, and category chips.

This style appears frequently in developer tools, documentation sites, and changelogs where the rectangular shape echoes the style of code blocks and technical labels.

<div class="flex flex-wrap gap-2">
  <span class="px-2 py-0.5 rounded-md text-xs font-mono font-bold bg-gray-100 text-gray-700">v3.4.1</span>
  <span class="px-2 py-0.5 rounded-md text-xs font-medium bg-orange-100 text-orange-700">JavaScript</span>
  <span class="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-100 text-blue-700">CSS</span>
  <span class="px-2 py-0.5 rounded-md text-xs font-medium bg-green-100 text-green-700">HTML</span>
</div>

Badge Sizing and Scaling

Badges come in different sizes depending on context. Inside a data table row, an extra-small badge (text-xs) keeps things compact. On a marketing page, a larger pill (text-sm px-4 py-1) is easier to read at a glance.

Define size variations by adjusting px-*, py-*, and text-* values. Avoid using absolute pixel sizes — stick to Tailwind's scale so your design remains consistent.

<!-- Extra small -->
<span class="px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700">XS</span>

<!-- Small (default) -->
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">SM</span>

<!-- Medium -->
<span class="px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-700">MD</span>

<!-- Large -->
<span class="px-4 py-1.5 rounded-full text-base font-medium bg-blue-100 text-blue-700">LG</span>

Pulse Animation on Live Badge

A common pattern for indicating real-time or live content is a pulsing dot. Use animate-ping on an absolutely positioned span inside the badge container to create a ripple effect that draws the eye.

Layer a static dot on top of the animated one: the animate-ping span creates the ripple while a solid sibling w-2 h-2 rounded-full bg-red-600 provides the core dot. Wrap both in a relative container.

<span class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
  <span class="relative flex w-2 h-2">
    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-2 w-2 bg-red-600"></span>
  </span>
  Live
</span>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: pill and square badge shapes built with rounded-full vs rounded-md; status color coding pairing light backgrounds (shade 100) with dark text (shade 800) from the same hue; and special badge patterns like notification counts with absolute positioning, dot indicators, remove buttons on tags, and the live pulse animation using animate-ping. Next up we combine components in a full UI.

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

บทเรียน “องค์ประกอบป้ายและแท็ก” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “องค์ประกอบป้ายและแท็ก”

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

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

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

บทเรียน “องค์ประกอบป้ายและแท็ก” ใช้เวลานานแค่ไหน

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

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

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

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

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