บทที่ 3: โครงสร้างพื้นฐานของ Utility Classes ใน Tailwind CSS

Utility Classes คืออะไร?

Utility Classes ใน Tailwind CSS คือคลาสที่ออกแบบมาให้ทำหน้าที่เฉพาะอย่าง เช่น การจัดการระยะห่าง สี ขนาดตัวอักษร หรือการจัดตำแหน่ง โดยแต่ละคลาสจะทำงานแค่เพียงหน้าที่เดียว เช่น:

text-center ใช้จัดข้อความให้อยู่ตรงกลาง
bg-blue-500 ใช้ตั้งค่าสีพื้นหลังเป็นสีน้ำเงินเฉพาะระดับความเข้ม
p-4 ใช้เพิ่มระยะ Padding รอบองค์ประกอบ

ข้อดีของการใช้ Utility Classes คือคุณสามารถผสมผสานคลาสต่าง ๆ เพื่อสร้างการออกแบบที่ซับซ้อนได้ โดยไม่ต้องเขียน CSS แยกต่างหาก

โครงสร้างพื้นฐานของ Utility Classes

1. การจัดการระยะห่าง (Spacing Classes)

Spacing Classes ใน Tailwind CSS แบ่งออกเป็น 2 กลุ่มหลัก:

Margin (m): สำหรับระยะห่างภายนอก
Padding (p): สำหรับระยะห่างภายใน

ตัวอย่าง:

<div class="m-4 p-4 bg-gray-200">
  ตัวอย่างระยะห่างด้วย Margin และ Padding
</div>

m-4 หมายถึง Margin รอบตัวองค์ประกอบ 1rem
p-4 หมายถึง Padding รอบตัวองค์ประกอบ 1rem

นอกจากนี้ยังสามารถกำหนดตำแหน่งเฉพาะได้ เช่น:

mt-4 (Margin Top)
mb-4 (Margin Bottom)
ml-4 (Margin Left)
mr-4 (Margin Right)

2. การจัดการสี (Color Classes)

ใน Tailwind CSS มีคลาสสำหรับจัดการสีพื้นหลัง (bg-) และสีข้อความ (text-):

<div class="bg-blue-500 text-white p-4">
  ตัวอย่างพื้นหลังและสีข้อความ
</div>

bg-blue-500 หมายถึงพื้นหลังสีน้ำเงินระดับความเข้ม 500
text-white หมายถึงข้อความสีขาว

Tailwind CSS ยังมีสีให้เลือกหลายระดับ เช่น bg-red-100 ถึง bg-red-900

3. การจัดการข้อความ (Typography Classes)

คุณสามารถควบคุมลักษณะข้อความได้ง่าย ๆ ด้วย Utility Classes เช่น:

ขนาดตัวอักษร (text-)

<p class="text-sm">ข้อความขนาดเล็ก</p>
<p class="text-xl">ข้อความขนาดใหญ่</p>

น้ำหนักตัวอักษร (font-)

<p class="font-light">น้ำหนักเบา</p> 
<p class="font-bold">น้ำหนักหนา</p>

การจัดตำแหน่งข้อความ

<p class="text-left">ข้อความชิดซ้าย</p> 
<p class="text-center">ข้อความอยู่กึ่งกลาง</p> 
<p class="text-right">ข้อความชิดขวา</p>

การจัดตำแหน่ง Layout

Tailwind CSS มีคลาสสำหรับจัด Layout อย่างง่ายดาย เช่น:

Flexbox

<div class="flex justify-center items-center h-64 bg-gray-200"> <p>จัดตำแหน่งด้วย Flexbox</p> </div>

flex ทำให้ Container ใช้ Flexbox

justify-center จัดแนวในแนวนอนให้อยู่กึ่งกลาง

items-center จัดแนวในแนวตั้งให้อยู่กึ่งกลาง

Grid

<div class="grid grid-cols-3 gap-4"> 
<div class="bg-blue-200 p-4">1</div> 
<div class="bg-blue-300 p-4">2</div> 
<div class="bg-blue-400 p-4">3</div> 
</div>

5. การจัดการขอบ (Border Classes)

Tailwind CSS มีคลาสสำหรับกำหนดเส้นขอบและมุมโค้ง:

เพิ่มเส้นขอบ (border)

<div class="border border-gray-500 p-4"> ตัวอย่างเส้นขอบ </div>

มุมโค้ง (rounded)

<div class="rounded-lg bg-gray-200 p-4"> ตัวอย่างมุมโค้ง </div>

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./dist/output.css" rel="stylesheet">
  <title>Utility Classes Example</title>
</head>
<body class="bg-gray-100 p-6">
  <div class="max-w-md mx-auto bg-white shadow-md rounded-lg p-6">
    <h1 class="text-2xl font-bold text-blue-500 mb-4">Hello, Tailwind CSS!</h1>
    <p class="text-gray-700 mb-4">
      นี่คือการใช้งาน Utility Classes ใน Tailwind CSS อย่างง่าย
    </p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
      คลิกที่นี่
    </button>
  </div>
</body>
</html>

สรุป

Utility Classes ใน Tailwind CSS ช่วยให้การออกแบบหน้าเว็บเป็นเรื่องง่ายและรวดเร็ว โดยคุณสามารถสร้าง Layout ที่สวยงามได้เพียงการใช้คลาสที่มีอยู่ในตัว ไม่ต้องเขียน CSS เองเลย ในบทต่อไป เราจะมาดูการปรับแต่งสี (Colors) ให้เหมาะสมกับแบรนด์หรือดีไซน์ของคุณ!