Dev to webs {Coding…}

บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 19: การใช้งาน Custom Components ใน Tailwind CSS

Custom Components คืออะไร?

Custom Components ใน Tailwind CSS คือการสร้างองค์ประกอบซ้ำ ๆ (Reusable Components) ที่สามารถนำไปใช้งานได้หลายที่ในโค้ด โดยไม่ต้องเขียนซ้ำทุกครั้ง Tailwind CSS รองรับการสร้าง Components แบบง่าย ๆ ผ่านการใช้ Utility Classes และคำสั่ง @apply เพื่อรวม Styles ที่ซับซ้อนเข้าไว้ด้วยกัน

1. การสร้าง Components ซ้ำ ๆ ด้วย Tailwind CSS

Tailwind CSS ช่วยให้คุณสร้าง Components ที่นำกลับมาใช้ใหม่ได้ง่าย เช่น ปุ่ม การ์ด หรือส่วนของฟอร์ม โดยใช้ Utility Classes

ตัวอย่างที่ 1: การสร้างปุ่ม (Button Component)

HTML ตัวอย่าง:

1
2
3
4
5
6
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
  คลิกที่นี่
</button>
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-700">
  ตกลง
</button>

ปัญหา: หากต้องใช้ปุ่มซ้ำหลายครั้ง จะทำให้โค้ดยาวและซับซ้อน

การแก้ไข: สร้าง Custom Component ด้วย @apply

ตัวอย่างใน CSS:

1
2
3
4
5
6
7
8
9
10
11
12
/* styles.css */
.btn {
  @apply px-4 py-2 rounded text-white;
}
 
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700;
}
 
.btn-success {
  @apply bg-green-500 hover:bg-green-700;
}

HTML หลังจากปรับปรุง:

1
2
<button class="btn btn-primary">คลิกที่นี่</button>
<button class="btn btn-success">ตกลง</button>

2. การใช้ @apply เพื่อจัดการ Styles

@apply เป็นคำสั่งใน Tailwind CSS ที่ช่วยให้คุณรวม Utility Classes ไว้ในไฟล์ CSS ได้ เพื่อเพิ่มความสะอาดของโค้ดและลดความซ้ำซ้อน

ตัวอย่างที่ 2: การสร้างการ์ด (Card Component)

HTML ตัวอย่าง:

1
2
3
4
<div class="bg-white shadow-lg rounded-lg p-6">
  <h3 class="text-lg font-bold">การ์ดตัวอย่าง</h3>
  <p class="text-gray-600">เนื้อหาในการ์ด</p>
</div>

ปัญหา: หากต้องสร้างการ์ดหลายอัน อาจทำให้โค้ดดูยุ่งเหยิง

การแก้ไข: สร้าง Component ด้วย @apply

ตัวอย่างใน CSS:

1
2
3
4
5
6
7
8
9
10
11
12
/* styles.css */
.card {
  @apply bg-white shadow-lg rounded-lg p-6;
}
 
.card-title {
  @apply text-lg font-bold;
}
 
.card-text {
  @apply text-gray-600;
}

HTML หลังจากปรับปรุง:

1
2
3
4
<div class="card">
  <h3 class="card-title">การ์ดตัวอย่าง</h3>
  <p class="card-text">เนื้อหาในการ์ด</p>
</div>

3. การสร้าง Components ซับซ้อนในฟอร์ม

HTML ตัวอย่าง:

1
2
3
4
5
<form>
  <label class="block text-gray-700">ชื่อ</label>
  <input type="text" class="border border-gray-300 rounded px-4 py-2 w-full">
  <button class="bg-blue-500 text-white px-4 py-2 rounded mt-4">ส่ง</button>
</form>

การปรับปรุงด้วย @apply:

ตัวอย่างใน CSS:

1
2
3
4
5
6
7
8
/* styles.css */
.form-input {
  @apply border border-gray-300 rounded px-4 py-2 w-full;
}
 
.form-button {
  @apply bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-700;
}

HTML หลังจากปรับปรุง:

1
2
3
4
5
<form>
  <label class="block text-gray-700">ชื่อ</label>
  <input type="text" class="form-input">
  <button class="form-button">ส่ง</button>
</form>

4. การสร้าง Components แบบยืดหยุ่น

ในบางกรณี คุณอาจต้องการให้ Components มีความยืดหยุ่นและรองรับการปรับแต่งเพิ่มเติม เช่น การเปลี่ยนสีหรือขนาด

ตัวอย่าง: ปุ่มที่รองรับสีแบบ Dynamic

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
/* styles.css */
.btn {
  @apply px-4 py-2 rounded text-white;
}
 
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700;
}
 
.btn-green {
  @apply bg-green-500 hover:bg-green-700;
}

HTML:

1
2
<button class="btn btn-blue">ปุ่มน้ำเงิน</button>
<button class="btn btn-green">ปุ่มเขียว</button>

5. การใช้ Components ร่วมกับ Framework

Tailwind CSS สามารถใช้ร่วมกับ Framework เช่น React, Vue, หรือ Angular โดยสร้าง Components เป็นส่วน ๆ และนำไปใช้ในโปรเจกต์

ตัวอย่างใน React:

1
2
3
4
5
6
7
8
9
10
11
// Button.jsx
export const Button = ({ children, variant }) => {
  const baseClass = "px-4 py-2 rounded text-white";
  const variantClass = variant === "primary" ? "bg-blue-500 hover:bg-blue-700" : "bg-green-500 hover:bg-green-700";
 
  return <button className={`${baseClass} ${variantClass}`}>{children}</button>;
};
 
// การใช้งาน
<Button variant="primary">ปุ่มหลัก</Button>
<Button variant="success">ปุ่มสำเร็จ</Button>

6. ข้อดีของการสร้าง Custom Components

  • ลดความซ้ำซ้อน: ไม่ต้องเขียน Utility Classes ซ้ำ ๆ
  • เพิ่มความสะอาดของโค้ด: อ่านง่ายและจัดการง่าย
  • เพิ่มความยืดหยุ่น: สามารถปรับแต่ง Components ได้ตามต้องการ
  • ลดข้อผิดพลาด: ช่วยให้สไตล์ของเว็บไซต์มีความสม่ำเสมอ

7. ตัวอย่างโปรเจกต์จริง

การสร้างการ์ดสินค้า:

1
2
3
4
5
6
7
8
<div class="card">
  <img src="product.jpg" alt="สินค้า" class="rounded-t-lg">
  <div class="p-4">
    <h3 class="card-title">ชื่อสินค้า</h3>
    <p class="card-text">คำอธิบายสินค้า</p>
    <button class="btn btn-blue mt-4">ซื้อเลย</button>
  </div>
</div>

สรุป

การสร้าง Custom Components ด้วย Tailwind CSS และคำสั่ง @apply ช่วยให้โค้ดของคุณสะอาด ยืดหยุ่น และง่ายต่อการบำรุงรักษา คุณสามารถสร้าง Components ที่นำกลับมาใช้ใหม่ได้ เช่น ปุ่ม การ์ด หรือฟอร์ม ซึ่งช่วยลดความซับซ้อนและเพิ่มความรวดเร็วในการพัฒนาเว็บไซต์ ในบทถัดไป เราจะพูดถึง เคล็ดลับในการปรับแต่ง Tailwind CSS สำหรับโปรเจกต์ใหญ่ เพื่อให้คุณพัฒนาเว็บที่ซับซ้อนได้ง่ายขึ้น!