มาเริ่มจากที่มาของ blog นี้กันดีกว่าครับ เนื่องจากผมได้เริ่มฝึกงานแล้วได้รับการบ้านมาเป็นการศึกษา Tailwind CSS เลยเกิดความคิดที่ว่าไหน ๆ ก็ต้องทำ present สรุปอยู่แล้ว ก็มาเขียน blog เก็บไว้ด้วยเลยแล้วกัน
Blog นี้เป็น blog แรกของผม ถ้าผิดพลาดตรงไหนขออภัยด้วยนะครับ :)
อย่างแรกเรามาทำความรู้จักกับ Tailwind CSS กันก่อนดีกว่า
ถ้าโดยสรุปก็คือ เป็น CSS framework ที่เน้นไปที่การเป็น “Utility-first” มี class เล็ก ๆ มาให้ โดย 1 class แทน 1 คำสั่งหน้าที่ แล้วให้เราเอามาประกอบรวมกัน ซึ่งจะไม่เหมือน Bootstrap ที่จะเป็น class component
// Bootstrap
class = "btn btn-primary"--------------------------------------------------------------------// Tailwind CSS
class = "bg-blue-500 text-white px-4 py-2 rounded"
สำหรับเรื่องการติดต้ังผมจะไม่ได้พูดถึงนะครับ Blog นี้จะเน้นไปที่ concept อย่างเดียว
Core Concepts
Utility-First Fundamentals — อย่างที่บอกไปครับ มันคือการเน้นไปที่ส่วนเล็ก ๆ ดังนั้น class จึงถูกแบ่งเป็น class เล็ก ๆ มากมาย
- ตัวอย่าง height
height: 0.5rem ---> h-2- ตัวอย่าง justify-content
justify-content: center ---> justify-centerจะเห็นได้ว่าชื่อ class นั้นแทบจะตรงตัวกับความสามารถที่มันทำได้เลย แถมยังเขียนได้สั้นกว่าด้วย และสำหรับใครที่หา class ไหนไม่เจออันนี้เป็น web ที่ map CSS property กับ Tailwaind class ไว้ให้ครับ https://tailwind.spacet.me
Handling Hover, Focus, and Other States — ทุก ๆ class ของ Tailwind CSS สามารถที่จะใส่ condition ต่าง ๆ ไว้ข้างหน้าได้ เช่น
class = "bg-sky-600 hover:bg-sky-700"Responsive Design —ใน Tailwind CSS จะมี Breakpoint prefix ให้ใช้ โดยเราสามารถกำหนดค่าเองหรือจะใช้ค่า default ก็ได้ วิธีใช้ก็แค่นำไปใส่หน้า class ที่เราต้องการเหมือน hover: เลยครับ ตัวอย่าง
<img class="w-16 md:w-32 lg:w-48" src="...">Width of 16 by default, 32 on medium screens, and 48 on large screens
Dark Mode —เพียงแค่เติม dark: ไปหน้า class ที่เราจะ style ก็จะได้ dark mode ให้ได้ใช้เลยครับ
<!-- Dark mode not enabled -->
<html>
<body>
<!-- Will be white -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html> <!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
Reusing and Custom Styles —การที่ utility-first ทำให้เมื่อ project โตขึ้น จะเกิดการใช้ class ที่ซ้ำ ๆ กันเยอะ ๆ Tailwind จึงมี best practices สำหรับการ Reusing Styles อยู่ คือ
- Using editor and language features
- Extracting components and partials
- Extracting classes with @apply
สำหรับการ Custom Styles เราสามารถที่จะ custom theme ขึ้นมาได้ในไฟล์ “tailwind.config.js” และถ้าหาก CSS property ตัวไหนที่ Tailwind ไม่ได้มีมาให้ เราสามารถใช้ […] ในการเขียนได้ เช่น
class = "top-[117px]"ใน Tailwind จะมีการแบ่งระดับของการ custom ไว้เป็น layer คือ
- base ใช้กับ html tag
- components ใช้เขียนเป็น components ที่รวม class เล็กๆไว้
- utilities ใช้ override class ที่มีอยู่แล้วของ Tailwind
Functions & Directives — เราสามารถที่จะ override class ของ Tailwind ได้ด้วยการใช้ @apply และ Tailwind ยังมี function theme() , screen() ให้เรียกใช้อีกด้วย
สรุป . . .
ถ้าโดยสรุปสั้นแล้วผมขอยกประโยคจากเพจ “แชร์ความรู้ Web development” ว่า
Bootstrap เปรียบเสมือน template เราจะเปลี่ยนอย่างอื่นไม่ได้ แต่ tailwind เปรียบเสมือน shortcut of css แปลว่าเราสามารถ customize อะไรก็ได้
