Tailwind CSS Vol. 2

ความเดิมจากบทความ Tailwind CSS Vol.1 ได้พาคุณผู้อ่านทราบวิธีการติดตั้งและการตั้งค่าเบื้องต้นในการใช้งาน Tailwind CSS ร่วมไปถึงรูปแบบการใช้งานและตัวอย่างชุดคำสั่งที่มีมาให้ใช้งานกันไปแล้ว ก่อนจบในบทความที่แล้วทางผู้เขียนได้บอกว่าเจ้า Tailwind CSS นั้นยังมีคุณสมบัติอื่นๆอีกที่น่าสนใจ ในบทความนี้จะพาท่านผู้อ่านไปทำความรู้จักคุณสมบัติเหล่านั้นกันครับ

Handling Hover, Focus, and Other States

เราสามารถใช้งาน utilities ที่มีให้ในการทำงานร่วมกับ states ต่างๆของ UI ได้ผ่าน การเรียกใช้ Class Name

ตัวอย่างการใช้งาน Hover States

จาก code ตัวอย่างจะเห็นได้ว่าเราสามารถเขียน style ร่วมกับ states ได้อย่างง่ายเพียงกำหนดชื่อ states: นำหน้าคำสั่งที่เราต้องการให้มีผลกับการแสดงผล ณ states นั้นๆ จาก code เป็นการกำหนด bg-sky-600 ให้กับปุ่ม แต่เมื่อมีการ hover ปุ่มนั้นจะเปลี่ยนสีพื้นหลังเป็น bg-sky-700 ตามที่เรากำหนดไว้

ซึ่งใน Tailwind CSS นั้นมี states ต่างๆให้เรียกใช้งานมากมาย ที่ใช้งานบ่อยๆ อาทิเช่น

• Pseudo-classes, like :hover, :focus, :first-child, and :required
• Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection

นอกจากที่ได้ยกตัวอย่างไปยังมี states อื่นๆที่น่าสนใจสามารถไปดูกันต่อได้ที Handling Hover, Focus, and Other States

Responsive Design

ในส่วนของการกำหนด style ให้รองรับการแสดงผลแบบ responsive นั้นก็สามารถทำผ่าน utilities ที่มีมาให้ด้วยเช่นกัน โดยเจ้า Tailwind CSS นั้นได้กำหนดขนาดของ Breakpoint การแสดงหน้าจอตั้งต้นไว้ดังนี้

หาก Breakpoint ตั้งต้นที่มีไว้ให้ไม่ตรงกับความต้องก่อนของคุณผู้อ่านยังสามารถตั้งค่า Breakpoint ได้ตามต้องการได้ในไฟล์ tailwind.config.js

ในการใช้งานก็คล้ายๆกับการใช้งาน states เพียงเปลี่ยนจาก states มาเป็น Breakpoint prefix: นำหน้าคำสั่งที่เราต้องการแทน มาดูตัวอย่างการใช้งานกันครับ

การกำหนด Style ในแต่ละ Breakpoint

จาดตัวอย่าง code เป็นกำหนดความกว้างให้กับ img โดยที่ขนาดหน้าจอตั้งแต่ 0px ขึ้นไปให้มีขนาดความกว้าง w-16 เมื่อหน้าจอมีขนาดอย่างน้อย 768px ขึ้นไป ให้มีขนาดความกว้าง w-32 และเมื่อหน้าจอมีขนาดอย่างน้อย 1024px ขึ้นไป ให้มีขนาดความกว้าง w-48 จะเห็นได้ว่าการเขียน code ให้รองรับการแสดงผลแบบ responsive นั้นดูง่าย การอ่าน code เองก็เข้าใจได้ง่ายขึ้นกว่าการเขียน CSS แบบเดิม

สามารถเข้าไปดูคำสั่งและการตั้งค่าอื่นๆได้ที่ Responsive Design

Dark Mode

เป็นอีกหนึ่งเรื่องของการแสดงผล UI ในยุคนี้คือระบบต้องมีการแสดงผลในรูปแบบ Dark Mode ถ้าไม่มีเดี๋ยวจะคุยกับเค้าไม่รู้เรื่อง Tailwind CSS เองก็มีให้เราได้ใช้งานเช่นกัน โดยรูปแบบการใช้งานนั้นก็ไม่ต่างกับ states หรือ Breakpoint prefix แต่อย่างใดเพียงแค่ใช้ dark:นำหน้าคำสั่งที่เราต้องการ

การกำหนด Style ใน Dark Mode

จาดตัวอย่าง code เป็นกำหนดสีพื้นหลัง bg-white ในหน้าจอปกติ และจะเปลี่ยนสีพื้นหลังเป็น dark:bg-slate-800 เพื่ออยู่ในสถานะ dark mode

สามารถเข้าไปดูคำสั่งและการตั้งค่าอื่นๆได้ที่ Dark Mode

ในตอนนี้ท่านผู้อ่านพอจะเห็นคุณสมบัติต่างๆที่ Tailwind CSS มีมาให้ใช้งาน ซึ่งทำ code style จะดูง่ายขึ้น การ code ค่อนข้างเป็นระบบมากขึ้นเพราะมีค่าตั้งต้นต่างๆที่ครอบคลุมให้เราใช้งาน แต่ทั้งหมดที่ได้อธิบายมานั้นเป็นการเรียกใช้งานผ่านคำสั่งที่มีไว้แล้ว ซึ่งถ้าเราต้องการกำหนดคำสั่งเองละจะต้องทำอย่างไร Tailwind CSS เองก็รองรับความต้องการนี้เช่นกัน ตามมาดูกันเลยว่าต้องทำอย่างไร

Directives

กฎของการกำหนดคำสั่งเองนั้น Tailwind CSS ได้แบ่งชุดคำสั่งออกเป็น layer หลักๆ สามส่วนคือ

• @tailwind base; (Element Tag)
• @tailwind components; (Components Class)
• @tailwind utilities; (utilities Class)

โดยเราสามารถกำหนดคำสั่งที่ต้องการผ่าน @layer มาดูตัวอย่างการใช้งานกันครับ

ตัวอย่างการกำหนดคำสั่งผ่าน @layer

จาก code ตัวอย่างในสามบรรทัดเป็นคำสั่งที่เราต้องใส่ไว้เพื่อเรียกใช้งานคำสั่งพื้นฐานของ Tailwind CSS แต่หากเราต้องการกำหนดคำสั่งเองให้กำหนดผ่าน @layer ตามด้วยกลุ่มของ layer ที่เราต้องกำหนด

• @layer base {…} ในส่วนนี้จะเป็นการ custom element tag ต่างๆไว้ในส่วนนี้ ในตัวอย่างคือการกำหนด style ให้กับ h1, h2
• @layer components {…} ในส่วนนี้จะเป็นการกำหนด components class ต่างๆไว้ในส่วนนี้ ในตัวอย่างคือการกำหนด style ให้กับ components .btn
• @layer utilities {…} ในส่วนนี้จะเป็นการ custom utilities class ต่างๆไว้ในส่วนนี้ ในตัวอย่างคือการกำหนด style ให้กับ .text-xs จากเดิมที่ขนาดตั้งต้นคือ font-size: 0.75rem มาเป็นใช้ font-size: 0.5rem แทน

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

บทความที่เกี่ยวข้อง Tailwind CSS Vol. 1

แหล่งข้อมูล https://tailwindcss.com/docs