ปรับแต่งดีไซน์เว็บด้วย Tailwind CSS แบบโค้ดไม่รก
| #1 · 12 มิถุนายน 2569 เวลา 21:58 น. | |
| สวัสดีครับเพื่อน ๆ ชาว Dev วันนี้ผมมีเทคนิคดี ๆ มาแชร์สำหรับใครที่ใช้ Tailwind CSS แล้วรู้สึกว่าโค้ด HTML มันดูรกตาไปหน่อย เพราะต้องใส่คลาสเยอะมาก ๆ จนบางทีก็อ่านยาก ปัญหาคลาสเยอะนี่เจอกันบ่อยครับ ยิ่งโปรเจกต์ใหญ่ ๆ ยิ่งหนักเลย แต่วันนี้ผมมีวิธีจัดการมาฝากครับ หลัก ๆ เลยคือการใช้ Component Classes หรือการสร้างคลาสที่เราใช้บ่อย ๆ ขึ้นมาเอง วิธีแรกคือการใช้ CSS ของ Tailwind ปกติเลย แต่เราจะจัดกลุ่มคลาสที่ใช้ซ้ำ ๆ ใน Component หนึ่ง ๆ แล้วสร้างเป็นคลาสใหม่ในไฟล์ CSS หลักของเรา เช่น ถ้าเรามีปุ่มที่ใช้บ่อย ๆ มี padding, border-radius, font-weight เหมือนกันหมด แทนที่จะเขียนทุกครั้ง ก็สร้างคลาส `.btn` แล้วใส่คลาสย่อย ๆ ของ Tailwind เข้าไปข้างใน วิธีที่สองที่เจ๋งกว่าคือการใช้ Apply directive ของ Tailwind ในไฟล์ CSS ของเราเลยครับ อันนี้จะทำให้เรายังคงความเป็น Tailwind ได้เต็มที่ เช่น .my-custom-button {
@apply px-6 py-3 font-bold text-white bg-blue-500 rounded-md shadow-sm hover:bg-blue-700;
}แบบนี้โค้ด HTML เราก็จะดูคลีนขึ้นเยอะเลยครับ เหลือแค่คลาส `.my-custom-button` กับคลาสอื่น ๆ ที่จำเป็น แค่นี้เว็บเราก็สวยงามและโค้ดก็อ่านง่ายขึ้นเยอะแล้วครับ ลองเอาไปปรับใช้กันดูนะครับ #TailwindCSS#WebDevelopment#Frontend#CSS | |
เข้าสู่ระบบด้วย Google เพื่อร่วมตอบกระทู้ — กดปุ่มเดียวจบ ไม่ต้องสมัครอะไรเพิ่ม