Typography ใน Tailwind CSS คืออะไร?

Typography เป็นส่วนสำคัญที่ช่วยให้ข้อความในหน้าเว็บดูน่าสนใจและอ่านง่าย Tailwind CSS มีชุด Utility Classes ที่ทรงพลังและยืดหยุ่นสำหรับจัดการลักษณะข้อความ เช่น ขนาด สี การจัดตำแหน่ง และการปรับรูปแบบตัวอักษร โดยไม่ต้องเขียน CSS เอง

1. การตั้งค่าขนาดตัวอักษร (text-)

Tailwind CSS มีคลาสสำหรับกำหนดขนาดตัวอักษรในหน่วย rem ที่พร้อมใช้งานทันที:

ตัวอย่าง:

<p class="text-sm">ข้อความขนาดเล็ก</p>
<p class="text-xl">ข้อความขนาดใหญ่</p>
<p class="text-4xl font-bold">ข้อความขนาดใหญ่มากพร้อมน้ำหนักตัวหนา</p>

2. การปรับน้ำหนักตัวอักษร (font-)

คุณสามารถกำหนดน้ำหนักของตัวอักษรได้ด้วยคลาส font- เช่น:

• font-thin: น้ำหนักเบามาก
• font-light: น้ำหนักเบา
• font-normal: น้ำหนักปกติ
• font-medium: น้ำหนักปานกลาง
• font-bold: ตัวหนา
• font-black: หนามากที่สุด

ตัวอย่าง:

<p class="font-thin">ข้อความน้ำหนักเบามาก</p>
<p class="font-bold">ข้อความน้ำหนักหนา</p>
<p class="font-black text-xl">ข้อความน้ำหนักหนามากพร้อมขนาดใหญ่</p>

3. การจัดตำแหน่งข้อความ (text-)

Tailwind CSS ช่วยให้คุณจัดตำแหน่งข้อความได้อย่างง่ายดาย:

• text-left: ข้อความชิดซ้าย
• text-center: ข้อความอยู่ตรงกลาง
• text-right: ข้อความชิดขวา
• text-justify: ข้อความจัดเต็มแนว

ตัวอย่าง:

<p class="text-left">ข้อความชิดซ้าย</p>
<p class="text-center">ข้อความอยู่ตรงกลาง</p>
<p class="text-right">ข้อความชิดขวา</p>
<p class="text-justify">ข้อความที่จัดเต็มแนว</p>

4. การจัดการระยะห่างระหว่างบรรทัด (leading-)

คุณสามารถกำหนดระยะห่างระหว่างบรรทัดได้ด้วยคลาส leading- เช่น:

• leading-none: ระยะห่าง 0
• leading-tight: ระยะห่างเล็ก
• leading-normal: ระยะห่างปกติ
• leading-loose: ระยะห่างมาก

ตัวอย่าง:

<p class="leading-none">ข้อความที่มีระยะห่างระหว่างบรรทัดน้อยมาก</p>
<p class="leading-loose">ข้อความที่มีระยะห่างระหว่างบรรทัดมาก</p>

5. การปรับรูปแบบตัวอักษร

Tailwind CSS มีคลาสสำหรับจัดการรูปแบบตัวอักษร เช่น:

• ตัวเอียง: italic / not-italic
• เส้นใต้: underline / no-underline
• ขีดทับ: line-through
• ตัวพิมพ์ใหญ่: uppercase / lowercase / capitalize

ตัวอย่าง:

<p class="italic">ข้อความตัวเอียง</p>
<p class="underline">ข้อความที่มีเส้นใต้</p>
<p class="uppercase">ข้อความตัวพิมพ์ใหญ่ทั้งหมด</p>
<p class="capitalize">ข้อความตัวแรกเป็นตัวพิมพ์ใหญ่</p>

6. การจัดการสีตัวอักษร (text-)

คุณสามารถกำหนดสีของข้อความได้ด้วยคลาส text- เช่น:

<p class="text-red-500">ข้อความสีแดง</p>
<p class="text-blue-700">ข้อความสีน้ำเงินเข้ม</p>
<p class="text-gray-500">ข้อความสีเทา</p>

7. การใช้งาน Decoration (ตกแต่งเพิ่มเติม)

Tailwind CSS มี Utility Classes สำหรับตกแต่งตัวอักษร:

• Text Decoration:
  • decoration-underline: เส้นใต้
  • decoration-line-through: ขีดทับ
  • decoration-none: ไม่มีเส้น
• Text Shadow (ผ่าน Plugin): หากต้องการเงาตัวอักษร คุณอาจต้องติดตั้ง Plugin เพิ่ม

ตัวอย่าง:

<p class="decoration-underline decoration-blue-500">ข้อความพร้อมเส้นใต้สีน้ำเงิน</p>
<p class="decoration-line-through decoration-red-500">ข้อความขีดทับสีแดง</p>

8. ตัวอย่างการใช้งาน Typography ในโปรเจกต์จริง

ตัวอย่างการออกแบบ Header:

<header class="bg-gray-800 text-white p-6">
  <h1 class="text-4xl font-bold">Welcome to Tailwind CSS</h1>
  <p class="text-lg font-light leading-loose">ปรับแต่ง Typography ให้สวยงามได้ง่าย ๆ</p>
</header>

ตัวอย่างการใช้ในบทความ:

<article class="prose lg:prose-xl">
  <h1>การใช้งาน Typography ใน Tailwind CSS</h1>
  <p>Tailwind CSS ช่วยให้การจัดการข้อความง่ายและมีสไตล์</p>
  <h2>หัวข้อย่อย</h2>
  <p>คุณสามารถใช้ Utility Classes เพื่อกำหนดขนาด สี และรูปแบบตัวอักษรได้ทันที</p>
</article>

9. การปรับแต่ง Typography ใน Tailwind Config

Tailwind CSS อนุญาตให้ปรับแต่ง Typography ได้ใน tailwind.config.js เช่น การเพิ่มฟอนต์หรือขนาดตัวอักษรใหม่

ตัวอย่างการเพิ่มฟอนต์:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
      },
    },
  },
};

ใช้งานใน HTML:

<p class="font-sans">ข้อความด้วยฟอนต์ Sans</p>
<p class="font-serif">ข้อความด้วยฟอนต์ Serif</p>

สรุป

Typography ใน Tailwind CSS ช่วยให้การจัดการข้อความเป็นเรื่องง่าย คุณสามารถปรับขนาด ฟอนต์ สี และรูปแบบตัวอักษรได้อย่างรวดเร็วและยืดหยุ่น ในบทต่อไป เราจะพูดถึงการจัด Layout ด้วย Flexbox และ Grid ซึ่งเป็นพื้นฐานสำคัญสำหรับการสร้างหน้าเว็บ!