Tailwind CSS Framework (Utility first)

ในวงการ CSS เราคุ้นเคยกับชื่อ Bootstrap ที่เคยโด่งดังมาก่อน หรือแม้แต่ Bulma CSS ที่เป็นที่นิยมในยุค Flexbox ทว่าปัจจุบัน ความนิยมของทั้งสองเฟรมเวิร์คนี้ลดลง โดยมี Tailwind CSS เข้ามาแทนที่ ดังนั้น แม้ว่าคุณอาจไม่ได้ใช้ Tailwind CSS โดยตรงในงานของคุณ แต่ในฐานะนักพัฒนา การรู้จักและเข้าใจ Tailwind CSS ก็เป็นสิ่งสำคัญในยุคปัจจุบัน

Table of contents

Tailwind Concept

Tailwind CSS ใช้แนวคิด “Utility-First” ซึ่งประกอบด้วย CSS class ขนาดเล็กที่มีหน้าที่เฉพาะเจาะจง สามารถนำมาประกอบกันเพื่อสร้างสไตล์ที่ต้องการ ตัวอย่างเช่น mt-2 หมายถึง margin-top: 8px; แนวคิดนี้คล้ายกับ functional programming ในการเขียนโปรแกรม

นอกจากนี้ Tailwind ยังรองรับการทำ responsive design, active และ focus state รวมถึง pseudo-classes อื่นๆ อีกทั้งยังอนุญาตให้ใช้ค่า arbitrary ผ่าน class ได้ เช่น หากต้องการกำหนดความสูงเฉพาะ สามารถใช้ h-[32px] เพื่อกำหนด height: 32px;

Height

สามารถดูได้ที่ทั้งหมดได้ที่ Tailwind-height

Width

สามารถดูได้ที่ทั้งหมดได้ที่ Tailwind-width

Example

ต่อไปเราจะทดลองสร้าง Card Component โดยมีข้อกำหนดดังต่อไปนี้

• width - 128 px
• height - 80 px
• padding - 8 px
• margin - 8 px
• border - solid 1 px
• border color - gray (anything not white tone)

โดยที่ถ้าเริ่มต้นเราจะเห็นได้เลยว่าจริงๆแล้วสำหรับ Tailwind คือการเอา utility class มารวมกัน

เมื่อรวมกันแล้วใส่ลงใน classname ของ react component เราจะได้แบบ code ตัวอย่างด้านล่าง

const Card: FC<PropsWithChildren> = ({ children }) => {
  return (
    <div className="m-2 h-20 w-32 border border-solid border-gray-500 p-2">
      {children}
    </div>
  );
};

ต่อมาเราบอกว่า อยากให้ Card นี้มีขอบ

• border radius - 8 px

const Card: FC<PropsWithChildren> = ({ children }) => {
  // เพิ่ม rounded-lg
  return (
    <div className="m-2 h-20 w-32 rounded-lg border border-solid border-gray-500 p-2">
      {children}
    </div>
  );
};

Responsive

ต่อไปเราจะทดลองสร้าง Card Component โดยมีข้อกำหนดดังต่อไปนี้

• mobile bg-color slate 700 (xs)
• tablet bg-color stone 700 (md)
• other bg-color white (lg up)
• mobile and tablet font-color black (xs-lg)
• other font-color white (lg up)

ใน Tailwind มี responsive class อยู่ ตาม Responsive-design

const Card: FC<PropsWithChildren> = ({ children }) => {
  return (
    <div className="m-2 h-20 w-32 rounded-lg border border-solid border-gray-500 bg-slate-700 p-2 text-white md:bg-stone-700 lg:bg-white lg:text-black">
      {children}
    </div>
  );
};

🎉🎉 ผลลัพธ์ที่ได้ก็คือ

Developer Extension

• Tailwind CSS IntelliSense ไว้ใช้ช่วย auto complete class ของ tailwind

Conclusion from writer

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

การใช้งาน Tailwind คล้ายกับแนวคิดของ Functional Programming ซึ่งถือเป็นจุดแข็งหลักของ framework นี้ ทำให้การพัฒนาเป็นไปอย่างมีประสิทธิภาพและยืดหยุ่นอีกด้วย