มารู้จักกับ Tailwind CSS Framework ที่จะทำให้ทำงานง่ายขึ้นกัน

Ref: https://tailwindcss.com/

หากพูดถึง CSS Framework ที่ Developer สาย UX/UI รู้จักกันดีคงหนีไม่พ้น Bootstrap ซึ่งปัจจุบัน CSS Framework นั้นมีหลายตัวให้เราเลือกใช้ อย่างเช่น Bootstrap, Foundation, Bulma, UIkit, Skeleton และตัวอื่นๆที่ไม่ได้กล่าวมา หนึ่งในนั้นที่ผมจะแนะนำให้ทุกคนได้รู้จักนั้นก็คือ Tailwind CSS

CSS Framework คืออะไร?

CSS Framework คือเครื่องมือช่วยให้ Developer และ Designer สามารถออกแบบเว็บไซต์ได้ง่ายและรวดเร็วขึ้น และเป็นตัวช่วยให้ Developer สามารถคุยกัน Designer ในเรื่องของ User Interface(UI) ของเว็บไซต์ได้ง่ายขึ้น ผ่าน Class ของ CSS Framework ตัวนั้นๆ ซึ่งสามารถสรุปให้เข้าใจได้ง่ายๆดังนี้

• ออกแบบเว็บได้ไวขึ้น นักพัฒนาและนักออกแบบสามารถใช้ CSS Framework ในการสร้างฟีเจอร์และภาพรวมของเว็บไซต์ เช่น แบบฟอร์ม แถบนำทาง ปุ่มต่างๆ รวมถึงแผนผังเว็บไซต์ที่ดูดีได้ในเวลาสั้นๆ
• ลดปัญหาการเกิดบั๊ก CSS Framework ทำให้เว็บไซต์ที่เพิ่งสร้างขึ้นสามารถใช้งานกับเบราว์เซอร์ได้หลายแบบ และยังช่วยลดโอกาสการเกิดบั๊กที่พบได้บ่อยในขณะทดสอบข้ามแพลตฟอร์มระหว่างเดสก์ท็อปกับมือถือ
• มีความยืดหยุ่นในการแก้ไข นักพัฒนาสามารถสร้าง UI ที่ดึงดูดสายตาและเป็นมิตรกับผู้ใช้งานได้อย่างรวดเร็ว แถมยังแก้ไขหน้าตาของ UI ให้เป็นไปตามการออกแบบ (Design System) ได้ง่ายๆ อีกด้วย

ทีนี้ Tailwind CSS คืออะไรกัน

Tailwind CSS คือ Utility Framework ที่ช่วยให้สร้าง UI ได้อย่างรวดเร็วขึ้น และสามารถปรับแต่งส่วนเล็กๆ ภายใน Class ได้ทันที ยกตัวอย่างเช่น สี ขนาด การจัดวาง ปุ่มต่างๆ ซึ่ง CSS ตัวนี้ยังสามารถนำไปใช้งานกับ React, Vue.js หรือ Angularjs ได้อีกต่างหาก

ที่นี้เรามาดูความหมายของ Tailwind CSS บางส่วนกัน

ยกตัวอย่างการเขียน CSS ปกติของปุ่ม

จากตัวอย่างด้านบน จะเห็นว่าในการเขียน CSS ปุ่มปกติ เราจะต้องสร้าง Class button-primary ขึ้นมา 1 ตัว แต่หากเราใช้ Tailwind CSS จะเขียนได้ดังนี้

จากตัวอย่าง Tailwind CSS ด้านบน จะเห็นได้ว่า เราไม่จำเป็นต้องไปเขียน Class ของปุ่มให้ยุ่งยาก เพียงแค่ศึกษา Class ต่างๆของ Framework ตัวนี้ ก็สามารถใช้งานได้ง่ายขึ้นทันที

ทีนี้มาลองติดตั้ง Tailwind CSS ด้วยผ่าน React กัน

1. สร้างโปรเจกต์ React ขึ้นมา

npx create-react-app tailwind-css

2. ติดตั้ง tailwind css ในโปรเจกต์

npm install -D tailwindcss postcss autoprefixer

3. สร้าง config file ของ tailwind css

npx tailwindcss init -p

4. เพิ่ม Config ที่ไฟล์ tailwind.config.js

5. Run โปรเจกต์ React

npm run start

6. ลองใช้ Tailwind CSS ดูโดยลองจาก App.js

ผลลัพธ์

ตัวอย่าง Source Code

GitHub - Kaseres/tailwind

สรุป

Tailwind CSS เป็น CSS Framework อีกทางเลือกหนึ่งที่ค่อนข้างใช้งานง่ายและสามารถปรับใช้งานได้อย่างคล่องตัวครับ หากสนใจเรื่อง Headless Components ของ Tailwind ก็มีให้ศึกษาครับ

ศึกษาเพิ่มเติมได้ที่

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Headless UI

Reference

• Tailwind CSS
• Tailwind CSS เฟรมเวิร์กที่ช่วยให้ Dev ทำงานง่ายขึ้น
• มาลองใช้ Tailwind CSS กับ React กัน