บทที่ 4: การจัดการสี (Colors) ใน Tailwind CSS

ทำไมการจัดการสีใน Tailwind CSS ถึงสำคัญ?

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

1. การใช้สีพื้นฐานใน Tailwind CSS

Tailwind CSS มีชุดสีมาตรฐานที่พร้อมใช้งาน เช่น สีแดง (red), สีน้ำเงิน (blue), สีเขียว (green), และสีอื่น ๆ โดยแต่ละสีจะมีระดับความเข้มตั้งแต่ 100 (อ่อนมาก) ถึง 900 (เข้มมาก)

ตัวอย่างการใช้สีพื้นหลัง (bg-) และสีข้อความ (text-)

<div class="bg-blue-500 text-white p-4">
  พื้นหลังสีน้ำเงิน ข้อความสีขาว
</div>

ในตัวอย่าง:

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

ตัวอย่างการใช้สีขอบ (border-)

<div class="border border-red-500 p-4">
  เส้นขอบสีแดง
</div>

2. การใช้สีแบบโฮเวอร์ (Hover State)

Tailwind CSS มี Pseudo-Classes เช่น hover: สำหรับเปลี่ยนสีเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ

ตัวอย่าง:

<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
  ปุ่มเปลี่ยนสีเมื่อโฮเวอร์
</button>

hover:bg-green-600 เปลี่ยนพื้นหลังเป็นสีเขียวที่เข้มขึ้นเมื่อโฮเวอร์

3. การปรับแต่งสีใน Tailwind CSS

หากสีที่มีอยู่ในระบบไม่เพียงพอ คุณสามารถเพิ่มหรือปรับแต่งสีเองได้ในไฟล์ tailwind.config.js

ตัวอย่างการเพิ่มสีใน tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3ABFF8',
          DEFAULT: '#0EA5E9',
          dark: '#0284C7',
        },
      },
    },
  },
};

ในตัวอย่างนี้ เราเพิ่มชุดสีใหม่ชื่อ brand ที่มีระดับความเข้ม 3 ระดับ:

brand-light
brand (ค่าเริ่มต้น)
brand-dark

การใช้งานใน HTML:

<div class="bg-brand text-white p-4">
  ตัวอย่างพื้นหลังสีที่กำหนดเอง
</div>

4. การใช้งาน Gradient Colors

Tailwind CSS รองรับ Gradient Colors โดยใช้คลาส bg-gradient-to-{direction} และกำหนดสีด้วย from-, via-, และ to-

ตัวอย่าง:

<div class="bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 p-6 text-white">
  พื้นหลังแบบไล่สี
</div>

ในตัวอย่าง:

bg-gradient-to-r คือ Gradient ไล่จากซ้ายไปขวา (right)
from-blue-500 คือจุดเริ่มต้นของ Gradient
via-green-500 คือสีที่อยู่ตรงกลาง
to-yellow-500 คือจุดสิ้นสุดของ Gradient

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

การสร้างการ์ดด้วยสีพื้นหลัง:

<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold text-gray-700">การ์ดตัวอย่าง</h2>
  <p class="text-gray-500 mt-2">นี่คือเนื้อหาในการ์ด</p>
  <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
    อ่านเพิ่มเติม
  </button>
</div>

การออกแบบ Navbar:

<nav class="bg-gray-800 text-white p-4">
  <ul class="flex space-x-4">
    <li><a href="#" class="hover:text-blue-400">หน้าแรก</a></li>
    <li><a href="#" class="hover:text-blue-400">เกี่ยวกับ</a></li>
    <li><a href="#" class="hover:text-blue-400">ติดต่อเรา</a></li>
  </ul>
</nav>

6. การใช้งาน Opacity

นอกจากการกำหนดสี Tailwind CSS ยังรองรับการกำหนดความโปร่งใสด้วย opacity-{value} โดยค่าของ Opacity จะอยู่ระหว่าง 0 ถึง 100

ตัวอย่าง:

<div class="bg-red-500 opacity-50 p-4">
  ตัวอย่างความโปร่งใส
</div>

7. การตั้งค่าโหมดสี Dark Mode

Tailwind CSS รองรับการออกแบบโหมดมืด (Dark Mode) โดยสามารถใช้งานได้ง่าย:

เปิดใช้งาน Dark Mode ในไฟล์ tailwind.config.js

 module.exports = { darkMode: 'class', // หรือ 'media' };

ใช้คลาส dark: เพื่อกำหนดสีในโหมดมืด

<div class="bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-4"> รองรับโหมดมืด </div>

สลับโหมดโดยเพิ่มคลาส dark ใน <html> หรือ <body>:

<html class="dark">

สรุป

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