การสร้าง Components อย่างง่ายด้วย Tailwind CSS

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้สีและ Typography ใน Tailwind CSS เพื่อสร้าง UI/UX ที่ดี ในบทนี้ เราจะมาเรียนรู้วิธีการสร้าง Components อย่างง่าย เช่น ปุ่ม เมนู และฟอร์ม ด้วย Tailwind CSS ซึ่งจะช่วยให้เราสามารถนำโค้ดมาใช้ซ้ำได้ง่ายขึ้น และทำให้โค้ดของเราเป็นระเบียบมากขึ้น

Tailwind CSS เป็น utility-first CSS framework ที่ไม่ได้บังคับให้เราต้องใช้ component library ที่กำหนดไว้ล่วงหน้า แต่เปิดโอกาสให้เราสร้าง components ของเราเองได้อย่างอิสระ ซึ่งเป็นข้อดีอย่างมาก เพราะเราสามารถปรับแต่ง components ให้เข้ากับความต้องการของโปรเจกต์ได้อย่างเต็มที่

ทำไมต้องสร้าง Components?

การสร้าง components มีข้อดีหลายประการ:

Reusable Code: Components สามารถนำไปใช้ซ้ำได้หลายครั้งในโปรเจกต์ ทำให้ลดปริมาณโค้ดที่เราต้องเขียน
Maintainability: การแก้ไข component เพียงครั้งเดียว จะมีผลกับการใช้งาน component นั้นๆ ทั้งหมดในโปรเจกต์ ทำให้การบำรุงรักษาโค้ดง่ายขึ้น
Consistency: Components ช่วยให้ UI ของเรามีความสอดคล้องกัน เพราะเราใช้ components เดียวกันในส่วนต่างๆ ของเว็บไซต์
Organization: การแบ่ง UI ออกเป็น components ทำให้โค้ดของเราเป็นระเบียบมากขึ้น และง่ายต่อการเข้าใจ

การสร้าง Custom Classes

วิธีพื้นฐานที่สุดในการสร้าง components ใน Tailwind CSS คือการสร้าง custom classes ในไฟล์ CSS ของเรา โดยใช้ directive @layer components

ตัวอย่างเช่น หากเราต้องการสร้างปุ่ม primary ที่มีสีพื้นหลังสีฟ้าและตัวอักษรสีขาว เราสามารถทำได้ดังนี้:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

ในตัวอย่างนี้ เราได้สร้าง class .btn-primary และใช้ @apply directive เพื่อนำ utility classes ของ Tailwind CSS มาใช้กับ class นี้ โดยเราได้กำหนดสีพื้นหลังเป็น bg-blue-500, สีเมื่อ hover เป็น bg-blue-700, สีตัวอักษรเป็น text-white, font เป็น font-bold, padding เป็น py-2 px-4 และ rounded corners เป็น rounded

จากนั้นเราสามารถนำ class .btn-primary ไปใช้กับ HTML element ของเราได้ดังนี้:

<button class="btn-primary">Primary Button</button>

Trade-off: การสร้าง custom classes เป็นวิธีที่ง่ายและรวดเร็ว แต่ข้อเสียคือเราต้องเขียน CSS เอง และอาจทำให้ไฟล์ CSS ของเรามีขนาดใหญ่ขึ้นได้

การใช้ @apply Directive

@apply directive เป็นเครื่องมือที่สำคัญในการสร้าง components ใน Tailwind CSS มันช่วยให้เราสามารถนำ utility classes มาใช้รวมกันใน custom classes ได้อย่างง่ายดาย

ข้อดีของ @apply:

Code Reusability: ช่วยให้เราสามารถนำ utility classes มาใช้ซ้ำได้
Maintainability: การแก้ไข utility classes เพียงครั้งเดียว จะมีผลกับการใช้งานทั้งหมดที่ใช้ @apply directive นั้น
Readability: ช่วยให้โค้ดของเราอ่านง่ายขึ้น เพราะเราไม่ต้องเขียน utility classes ซ้ำๆ กัน

ข้อควรระวังในการใช้ @apply:

Overuse: การใช้ @apply directive มากเกินไปอาจทำให้โค้ดของเราซับซ้อนขึ้น และยากต่อการบำรุงรักษา
Specificity: @apply directive จะเพิ่ม specificity ของ CSS rules ซึ่งอาจทำให้เกิดปัญหาในการ override styles ในภายหลัง

แนวปฏิบัติที่ดี: ใช้ @apply directive เมื่อต้องการสร้าง components ที่ซับซ้อน และมี utility classes จำนวนมาก แต่พยายามหลีกเลี่ยงการใช้ @apply directive ในการ override styles ที่กำหนดไว้แล้ว

การสร้าง Variants

Variants คือรูปแบบที่แตกต่างกันของ component เดียวกัน ตัวอย่างเช่น ปุ่ม primary และปุ่ม secondary อาจมีรูปแบบที่แตกต่างกันในเรื่องของสีพื้นหลังและสีตัวอักษร

เราสามารถสร้าง variants ได้โดยการเพิ่ม modifiers ให้กับ custom classes ของเรา ตัวอย่างเช่น:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white;
  }
  .btn-secondary {
    @apply bg-gray-500 hover:bg-gray-700 text-white;
  }
}

ในตัวอย่างนี้ เราได้สร้าง class .btn ซึ่งเป็น base class สำหรับปุ่มทั้งหมด และสร้าง class .btn-primary และ .btn-secondary ซึ่งเป็น variants ของปุ่ม primary และ secondary ตามลำดับ

จากนั้นเราสามารถนำ class เหล่านี้ไปใช้กับ HTML element ของเราได้ดังนี้:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

Trade-off: การสร้าง variants ช่วยให้เราสามารถสร้าง components ที่มีความยืดหยุ่นมากขึ้น แต่ข้อเสียคือเราต้องจัดการกับ classes จำนวนมากขึ้น และอาจทำให้โค้ดของเราซับซ้อนขึ้นได้

ตัวอย่าง: การสร้าง Form Input

ลองมาดูตัวอย่างการสร้าง form input component อย่างง่าย:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .form-input {
    @apply appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500;
  }
}

และใช้งานใน HTML:

<input class="form-input" type="text" placeholder="Enter your name">

ในตัวอย่างนี้ เราได้ใช้ utility classes หลายตัวเพื่อกำหนดลักษณะของ input field เช่น appearance-none เพื่อลบ styles เริ่มต้นของ browser, block และ w-full เพื่อให้ input field แสดงเต็มความกว้างของ container, bg-gray-200 และ text-gray-700 เพื่อกำหนดสีพื้นหลังและสีตัวอักษร, border, rounded, py-3, px-4, leading-tight เพื่อกำหนด border, rounded corners, padding และ line height และ focus:outline-none, focus:bg-white, focus:border-gray-500 เพื่อกำหนด styles เมื่อ input field ถูก focus

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการสร้าง components อย่างง่ายด้วย Tailwind CSS โดยใช้ custom classes, @apply directive และ variants การสร้าง components เป็นวิธีที่มีประสิทธิภาพในการนำโค้ดมาใช้ซ้ำ และทำให้โค้ดของเราเป็นระเบียบมากขึ้น ในบทต่อไป เราจะมาเรียนรู้วิธีการสร้าง responsive design พื้นฐานด้วย Tailwind CSS