มาลองใช้ Tailwind CSS กับ React กัน
tailwind css ชื่อแปลกจังเลย 🎨💄
สวัสดีค่ะทุกคน ในช่วงนี้คงมีหลาย ๆ คนที่กำลังเบื่อ ๆ กับการที่ต้องอยู่ที่บ้านไปไหนไม่ได้ เราเลยอยากจะแนะนำ Utility First CSS framework ที่มีชื่อว่า Tailwind ให้รู้จัก เพราะเจ้าของบล็อกพึ่งเคยลองใช้งานเป็นครั้งแรกแล้วรู้สึกเลิฟมากกกกกกกกก (ไปอยู่ไหนมาพึ่งรู้จัก) สำหรับใครที่เคยใช้งาน Bootstrap มาก่อนอาจคุ้นตาเพราะการใช้งานของมันมีความคล้ายมาก เลิกร่ายยาวไปดูกันเลยค่ะ
Tailwind CSS คืออะไรกันนะ
เจ้า Tailwind CSS เนี่ยมันคือ css framework ตัวหนึ่งนี่แหละที่สามารถนำไปใช้งานกับ React, Vue.js หรือ Angularjs
CORE CONCEPT’s Tailwind CSS
- Utility-First — ข้อเนี้ยเขาเคลมว่าเราสามารถใช้งาน custom css ได้โดยที่เราไม่ต้องเขียน css เลย เช่น การใส่พื้นหลังของ card ให้เป็นสีขาวสามารถทำได้โดยการเพิ่ม
bg-white
ที่ class
2. Responsive Design — การทำ responsive แบบง่ายมาก ๆ และเราสามารถ custom breakpoints เองได้ด้วย โดย config เพิ่มใน tailwind.js
ตัวอย่างการ custom breakpoints
ตัวอย่างการทำ responsive
การกำหนดขนาดของตัวอักษร เมื่อหน้าจอปกติให้ตัวอักษรอยู่ตรงกลาง และเมื่อจอขนาด sm ให้ตัวอักษรชิดซ้าย สามารถทำได้อย่างง่าย ๆ แบบนี้ class=“text-center sm:text-left”
3. Pseudo-Class Variants — ง่ายต่อการจัดการ style elements on hover, focus, และอื่น ๆ อีกมากมาย จะเห็นได้ว่าเราไม่ต้องไปเขียน CSS เลย
ตัวอย่างการจัดการ Hover
4. Adding Base Styles — การกำหนด base style CSS สามารถกำหนดได้ โดยประกาศ @tailwind base
และเขียน base style หลังจากนั้น โดยใช้ directive @apply
5. Extracting Components — เมื่อมี class อะไรที่เราใช้งานซ้ำ ๆ เช่น Button ก็สามารถที่จะสร้างมันขึ้นมาเป็น component เดียว
ตัวอย่างการ Extracting CSS components ด้วยการใช้ @apply
จากตัวอย่างจะเห็นว่า Button มีการเขียน class ซ้ำ ๆ แบบเดิม เราสามารถ Extract มันออกมาได้แบบนี้
HTML
CSS
ก็คือ เราจะเขียน CSS ใหม่ขึ้นมาแล้วกรุ๊ป พวก utilities class ของ tailwind ไว้โดยใช้ directive @apply
การทำแบบนี้จะทำให้เราสามารถทำให้ลดการเขียนที่ซ้ำ ๆ ได้
6. Adding New Utilities — แน่นอนว่าเราก็คงอยากจะเขียน Utilities ของตัวเองไว้ใช้ Tailwind ก็ทำให้เราสามารถทำแบบนั้นได้ง่าย ๆ แบบนี้
ตอนเอาไปใช้งานสามารถใช้ได้เหมือนตอนเขียน Html & CSS ทั่วไปเลย
6. Functions & Directives — มันมี Function และ Directive ของตัวเองนะ ได้แก่
@tailwind
เอาไว้จัดการพวกbase
,components
,utilities
และscreens
@apply
เอาไว้ Custom CSS จาก utilities ที่มีอยู่แล้ว
@variants
เอาไว้จัดการ Variants เมื่อต้องการสร้าง utilities ของตัวเอง
@responsive
เอาไว้ทำ Responsive เมื่อต้องการสร้าง utilities ของตัวเอง
@screen
เอาไว้ทำจัดการกับหน้าจอขนาดต่าง ๆ เหมือน Meqia Query แต่ใน Tailwind จะยึดขนาดตาม breakpoints ที่กำหนดไว้ ซึ่งใช้งานโดยเรียกชื่อได้เลยแบบนี้
theme()
ฟังก์ชันนี้ทำให้เราสามารถเข้าถึงไฟล์tailwind.config.js
เพื่อใช้งานค่าใน configในนั้นได้ ซึ่งจะใช้.
ในการเข้าถึงค่า แบบนี้
จบแล้วกับ CORE CONCEPT ของ Tailwind CSS ทั้ง 6 ข้อ ต่ามาเรามาลอง set up มันกับ react กันเถอะ
ลงมือทำ 💪🏻
- สร้างโปรเจกต์ โดยใช้
npx create-react-app try-tailwind-css
2. ติดตั้ง tailwind css ที่โปรเจกต์ของเรา
npm install tailwindcss
3. สร้าง Tailwind config file
npx tailwindcss init --full
4. ติดตั้ง postcss-cli และ autoprefixer
npm install --save tailwindcss postcss-cli autoprefixer
5. สร้างไฟล์ postcss.config.js และเพิ่ม config
6. เพิ่ม Components ของ Tailwind, Utilities และ Base Styles มาที่โปรเจกต์เรา โดยเพิ่มไว้ใน src ในที่นี้จะสร้างเป็น styles/tailwind.css
เพื่อ import tailwind style และสร้าง custom utilities ของตัวเอง
7. สร้าง main.css
ไว้ใน folder เดียวกันกับ tailwind.css
(src/main.css) เพื่อเก็บ style ที่ถูกสร้างจาก tailwind.css และ import ไปที่ App.js
8. เพิ่ม config เพื่อให้เว็บเรา build css ด้วย
9. ลอง Run Project และใช้งาน Tailwind Utilities
npm start
ผลลัพธ์
ตัวอย่าง Source Code
สรุป
เราว่าอันนี้ก็เป็นอีกทางเลือกหนึ่งของ CSS Framework เพราะมันใช้งานง่ายมาก แต่สำหรับเราที่ยังติด Style Components อยู่ก็ยังชั่งใจว่าจะเลือกใช้อันไหน ใจจริงคิดว่าอยากจะใช้สองอันเลย เพราะชอบตัว tailwind ตรงที่มันมีพวก common style ที่ปกติเราก็ config เองใน global css ตลอด เช่น พวก margin padding (mt-1, mx, my, p, pl บลาๆๆ) ต่าง ๆ แต่ก็ยังตัดขาดจาก CSS-in-JS ไม่ได้อยู่ดี 😂 เรื่อง Performance ยังไม่ได้ดูนะคะ ถ้าใช้สองตัวด้วยกัน พร้อมรับฟังความคิดเห็น ถ้าใครเคยใช้แล้วเป็นไง ช่วยแนะนำให้ด้วยนะคะ ขอบคุณที่อ่านมาจนจบค่ะ 😊