Tailwind CSS Vol. 1

ในบทความนี้เราจะมาพูดถึง CSS Framework ตัวหนึ่งที่มาแรงเป็นที่นิยมใช้กัน ที่มีชื่อว่า Tailwind CSS

Tailwind CSS คืออะไร

ตามที่เราได้พูดไว้ตอนต้น Tailwind CSS คือCSS Framework ตัวหนึ่งที่มีรูปแบบการทำงานแบบ Utility-First โดย Utility คือ Class Selector ตัวหนึ่ง ที่เมื่อใช้งานก็เพียงเรียกใช้ Utility ต่างๆมาประกอบกันให้ได้การแสดงผลตามที่เราต้องการ ซึ่งจะมีความต่างกับ CSS Framework อื่นที่มักจะกำหนด Class Selector ให้เฉพาะเจาะจงกับรูปแบบการแสดงผลของ Element นั้นๆไปเลย

ตัวอย่างการใช้งานระหว่าง Bootstrap & Tailwind CSS

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

เริ่มต้นการติดตั้ง Tailwind CSS

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

• Tailwind CLI
• Using PostCSS
• Framework Guides
• Play CDN

โดยในบทความนี้เราจะใช้วิธีติดตั้งในรูปแบบ Framework Guides React App

1. สร้าง React App ด้วยคำสั่ง

npx create-react-app try-tailwind
cd try-tailwind

2. ติดตั้ง tailwindcss , postcss , autoprefixer ด้วยคำสั่ง

npm install -D tailwindcss postcss autoprefixer

3. สร้างไฟล์ tailwind.config.js และ postcss.config.js ด้วยคำสั่ง

npx tailwindcss init -p

4. กำหนดค่า template paths ในไฟล์ tailwind.config.js โดยในไฟล์นี้จะใช้สำหรับ config ค่าต่างๆของ Tailwind

/** @type {import('tailwindcss').Config} */ 
module.exports = {   
   content: [
      "./src/**/*.{js,jsx,ts,tsx}",
   ],   
   theme: {
      extend: {},
   },
   plugins: [],
}

5. ทำการเพิ่ม Tailwind directives ไปในไฟล์ css ในตัวอย่างโปรเจคนี้คือไฟล์ index.css

@tailwind base; 
@tailwind components; 
@tailwind utilities;

6. ทำการ Start your build process ด้วยคำสั่ง

npm run start

การใช้งาน Tailwind CSS

หลังจากทำตามขั้นตอนต่างๆแล้วเรามาลองใช้คำสั่ง Tailwind CSS กัน โดยหลักการใช้งาน Tailwind CSS นั้น เป็นรูปแบบกำหนด style ให้กับ Element นั้นๆที่เราต้องการคล้ายๆกับการเขียน CSS แบบ Inline Style Sheet แต่เปลี่ยนมาใช้ class name ที่ Tailwind มีไว้ให้แทน เรียกการใช้งานแบบนี้ว่า Utility-First Fundamentals

ภาพตัวอย่าง Element Button

ตัวอย่างการใช้งาน Tailwind CSS กำหนด style ให้กับปุ่ม Default โดยใช้ class name

การกำหนด style แบบ code ตัวอย่างอาจจะดูว่าเขียนเยอะกว่าแบบการใช้งาน Framework อื่นๆ แต่ข้อดีคือเราสามารถทำ UI ออกมาให้มีความแตกต่างจากเว็บอื่นๆที่ใช้ Framework เดียวกัน โดยไม่ต้องมาเขียนแก้ทับ Framework ที่เราใช้

ตัวอย่างการใช้งาน Tailwind CSS กำหนด style ให้กับปุ่ม style ต่างๆ

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

HTML ที่ใช้งาน class name ที่เรากำหนด style

Css ที่ใช้คำสั่งของ Tailwind CSS กำหนด style ผ่าน @apply

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

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

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

ชุดสีพื้นฐาน (Default color palette)

ก่อนที่จะไปดูตัวอย่างการใช้งานคำสั่งเรามารู้จักกับ Default color palette กันก่อนครับใน Tailwind CSS เริ่มต้นเลยจะมีชุดสีมากมายให้เราสามารถเลือกใช้งานเรียกได้ว่าแทบจะครอบคลุมทุกโทนสีเพราะแต่ละสีมีน้ำหนักความเข้มสี 10 ระดับกันเลยทีเดียว

รูปแบบการใช้งาน class : ชื่อคำสั่ง-ชื่อสี-ความเข้มสี

ตัวอย่างการใช้งาน : bg-green-200, text-gray-500, border-red-500

ตัวอย่าง Default color palette ที่ Tailwind CSS มีให้ใช้งาน

จากภาพตัวอย่างมีให้ใช้เยอะมากจริงๆ แต่หากสีที่มีให้ยังไม่ตรงกับความต้องการของคุณผู้อ่าน หรือ ลูกค้าที่อยากได้สีดำที่สว่างหน่อยอะไรประมาณนี้ Tailwind CSS ก็ให้ท่านสามารถกำหนดสีเพิ่มเติมได้ในไฟล์ tailwind.config.js

สามารถเข้าไปดูการตั้งค่าต่างๆได้ที่ Customizing Colors

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

สีพื้นหลัง

รูปแบบการใช้งาน class : bg-ชื่อสี-ความเข้มสี

ตัวอย่างการใช้งาน : bg-gray-200, bg-blue-500

สามารถเข้าไปดูคุณสมบัติอื่นๆของคำสั่งที่ Background Color

สีขอบ

รูปแบบการใช้งาน class : border-ชื่อสี-ความเข้มสี

ตัวอย่างการใช้งาน : border-gray-200, border-blue-500

สามารถเข้าไปดูคุณสมบัติอื่นๆของคำสั่งที่ Border Color

สีตัวอักษร

รูปแบบการใช้งาน class : text-ชื่อสี-ความเข้มสี

ตัวอย่างการใช้งาน : text-gray-200, text-blue-500

สามารถเข้าไปดูคุณสมบัติอื่นๆของคำสั่งที่ Text Color

การจัดการข้อความ (Typography)

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

สีตัวอักษร

รูปแบบการใช้งาน class : text-ชื่อสี-ความเข้มสี

ตัวอย่างการใช้งาน : text-gray-200, text-blue-500

สามารถเข้าไปดูคุณสมบัติอื่นๆของคำสั่งที่ Text Color

ขนาดตัวอักษร

การกำหนดขนาดตัวอักษรจะกำหนดด้วยชื่อของขนาด โดยมีขนาดให้เลือกใช้งานหลากหลายขนาด โดยจะกำหนด font-size ด้วยหน่วย rem โดยมีขนาดตั้งต้นที่ 16px ข้อดีของการกำหนดขนาดตัวอักษรด้วยคำสั่งของ Tailwind CSS นั้นนอกจากจะกำหนด font-size แล้วในทุกๆขนาดจะมีการกำหนด line-height ให้มีความเหมาะสมกับขนาดของ font-size ด้วย

รูปแบบการใช้งาน class : text-ชื่อขนาด

ตัวอย่างการใช้งาน : text-base, text-xs, text-2xl

สามารถเข้าไปดูคุณสมบัติอื่นๆของคำสั่งที่ Font Size

ความหนาตัวอักษร

การกำหนดความหนาตัวอักษรจะกำหนดด้วยชื่อของความหนาโดยมีน้ำหนักให้ใช้งานตั้งแต่ 100–900 ทั้งนี้การแสดงผลนั้นจะเป็นไปตามที่เรากำหนดหรือไม่ขึ้นอยู่กับ font ที่เราเรียกใช้งานด้วยว่ามีน้ำหนักของตัวอักษรตรงกับน้ำหนักที่กำหนด

รูปแบบการใช้งาน class : text-ชื่อขนาด

ตัวอย่างการใช้งาน : text-base, text-xs, text-2xl

สามารถเข้าไปดูคุณสมบัติอื่นๆของคำสั่งที่ Font Size

การจัดการขนาด (Sizing)

ในส่วนของการกำหนดขนาดทั้งความกว้างและความสูงมีให้ใช้งานทั้งรูปแบบกำหนดขนาดตายตัวด้วยหน่วย rem และอัตราส่วน เปอร์เซ็นต์

ความกว้าง

รูปแบบการใช้งาน class : w-ขนาดความกว้าง

ตัวอย่างการใช้งาน : w-1, w-full, w-1/2

ความสูง

รูปแบบการใช้งาน class : h-ขนาดความสูง

ตัวอย่างการใช้งาน : h-1, h-full, h-1/2

สามารถเข้าไปดูคุณสมบัติอื่นๆของคำสั่งการจัดการขนาดที่ Sizing

การจัดการระยะห่างเส้นขอบ (Margin)

รูปแบบการจัดการระยะห่างเสันขอบนั้นจะแบ่งออกเป็น 4 รูปแบบ

• ทุกด้าน คือการกำหนดระยะห่างสองด้านบนล่างโดยใช้ อักษรย่อ m= Margin

รูปแบบการใช้งาน class : m-ขนาด

ตัวอย่างการใช้งาน : m-3, m-4

• เฉพาะด้าน คือการกำหนดระยะห่างเพียงด้านเดียวโดยใช้อักษรย่อ mt=top, mb=bottom, ml=left, mr=right

รูปแบบการใช้งาน class : mt-ขนาด, mb-ขนาด, ml-ขนาด, mr-ขนาด

ตัวอย่างการใช้งาน : mt-1, mb-2, ml-3, mr-4

• สองด้านแนวนอน คือการกำหนดระยะห่างสองด้านซ้ายและขวาโดยใช้ อักษรย่อ mx = left, ight

รูปแบบการใช้งาน class : mx-ขนาด

ตัวอย่างการใช้งาน : mx-1, mx-2

• สองด้านแนวตั้ง คือการกำหนดระยะห่างสองด้านบนล่างโดยใช้ อักษรย่อ my= top, bottom

รูปแบบการใช้งาน class : my-ขนาด

ตัวอย่างการใช้งาน : my-3, my-4

สามารถเข้าไปดูคุณสมบัติอื่นๆของคำสั่งการจัดการระยะห่างเส้นขอบที่ Margin

ในส่วนของตัวอย่างคำสั่งในบทความนี้ขอทำการยกตัวอย่างไว้เท่านี้เพราะยังมีคำสั่งอีกเยอะมากให้ใช้งานถ้าจะให้อธิบายกันหมดก็คงต้องใช้เวลากันพอควรเลย หากอยากรู้คำสั่งไหนเพิ่ม ลองเข้าไปค้นหาในคู่มือการใช้งานได้ที่ Tailwind Docs

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

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

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