บทที่ 18: การจัดการ Borders และ Shadows ใน Tailwind CSS

Borders (เส้นขอบ) คืออะไร?

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

1. การเพิ่มเส้นขอบ (Borders)

Tailwind CSS รองรับการเพิ่มเส้นขอบด้วยคลาส border:

border: เพิ่มเส้นขอบขนาดเริ่มต้น (1px)
border-{value}: กำหนดความหนาของเส้นขอบ เช่น border-2, border-4, border-8

ตัวอย่าง:

<div class="border border-gray-300 p-4">
  เส้นขอบมาตรฐาน
</div>
<div class="border-4 border-blue-500 p-4">
  เส้นขอบหนา 4px สีน้ำเงิน
</div>

2. การกำหนดสีของเส้นขอบ

คุณสามารถกำหนดสีของเส้นขอบได้ด้วยคลาส border-{color} โดยมีสีสำเร็จรูปให้เลือก เช่น border-gray-300, border-red-500, border-blue-700

ตัวอย่าง:

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

3. การเพิ่มเส้นขอบเฉพาะด้าน

Tailwind CSS อนุญาตให้คุณเพิ่มเส้นขอบเฉพาะด้านด้วย:

border-t-{value}: เส้นขอบด้านบน
border-r-{value}: เส้นขอบด้านขวา
border-b-{value}: เส้นขอบด้านล่าง
border-l-{value}: เส้นขอบด้านซ้าย

ตัวอย่าง:

<div class="border-t-4 border-blue-500 p-4">
  เส้นขอบเฉพาะด้านบน
</div>
<div class="border-l-4 border-green-500 p-4">
  เส้นขอบเฉพาะด้านซ้าย
</div>

4. การทำมุมโค้ง (Rounded Borders)

Tailwind CSS มีคลาสสำหรับทำมุมโค้ง เช่น:

rounded: โค้งเล็กน้อย
rounded-lg: โค้งมากขึ้น
rounded-full: โค้งเป็นวงกลม
rounded-{direction}: โค้งเฉพาะด้าน เช่น rounded-t, rounded-l

ตัวอย่าง:

<div class="rounded bg-gray-200 p-4">
  มุมโค้งเล็กน้อย
</div>
<div class="rounded-full bg-blue-500 text-white p-4">
  มุมโค้งเต็มวงกลม
</div>

5. Shadows (เงา) คืออะไร?

Shadows หรือเงา ช่วยเพิ่มมิติให้กับองค์ประกอบในหน้าเว็บ Tailwind CSS มีคลาส shadow สำหรับการเพิ่มเงาในระดับต่าง ๆ

6. การเพิ่มเงา

Tailwind CSS มีคลาสเงาที่ใช้งานง่าย:

shadow: เพิ่มเงามาตรฐาน
shadow-sm: เงาขนาดเล็ก
shadow-lg: เงาขนาดใหญ่
shadow-none: ไม่มีเงา

ตัวอย่าง:

<div class="shadow bg-white p-4">
  กล่องมีเงา
</div>
<div class="shadow-lg bg-white p-4">
  กล่องเงาขนาดใหญ่
</div>
<div class="shadow-sm bg-white p-4">
  กล่องเงาขนาดเล็ก
</div>

7. การปรับแต่งเงาเพิ่มเติม

นอกจากระดับเงามาตรฐาน คุณสามารถปรับแต่งสีและขอบเขตของเงาได้ในไฟล์ tailwind.config.js

ตัวอย่างการเพิ่มเงาแบบกำหนดเอง:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom-light': '0 2px 4px rgba(0, 0, 0, 0.1)',
        'custom-dark': '0 4px 6px rgba(0, 0, 0, 0.4)',
      },
    },
  },
};

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

<div class="shadow-custom-light bg-white p-4">
  กล่องเงาแบบกำหนดเอง (เบา)
</div>
<div class="shadow-custom-dark bg-white p-4">
  กล่องเงาแบบกำหนดเอง (เข้ม)
</div>

8. ตัวอย่างการใช้งาน Borders และ Shadows ในโปรเจกต์จริง

ตัวอย่าง: การ์ดสินค้า

<div class="max-w-sm bg-white border border-gray-300 rounded-lg shadow-lg p-4">
  <h2 class="text-xl font-bold">สินค้า</h2>
  <p class="text-gray-600">คำอธิบายสินค้า</p>
  <button class="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600">
    ซื้อเลย
  </button>
</div>

ตัวอย่าง: ปุ่มพร้อมเงา

<button class="bg-green-500 text-white px-6 py-3 rounded shadow-lg hover:shadow-xl">
  คลิกที่นี่
</button>

9. เคล็ดลับการใช้ Borders และ Shadows

ใช้ Borders เพื่อเพิ่มความชัดเจน: เช่น การแยกส่วนเนื้อหา
ใช้ Shadows เพื่อเพิ่มมิติ: ให้กล่องหรือปุ่มดูนูนขึ้น
หลีกเลี่ยงการใช้เงาเข้มเกินไป: อาจทำให้หน้าดูรกและไม่น่าสบายตา
ปรับแต่งใน tailwind.config.js: เพื่อให้สอดคล้องกับดีไซน์ของแบรนด์

สรุป

Borders และ Shadows ใน Tailwind CSS ช่วยเพิ่มความสวยงามและมิติให้กับหน้าเว็บได้อย่างง่ายดาย คุณสามารถปรับแต่งขนาด สี และลักษณะได้อย่างยืดหยุ่นผ่าน Utility Classes หรือการตั้งค่าเพิ่มเติมใน tailwind.config.js ในบทถัดไป เราจะมาทำความเข้าใจเกี่ยวกับ การสร้างธีมแบบกำหนดเอง เพื่อปรับ Tailwind CSS ให้เหมาะกับแบรนด์ของคุณ!