มาลองใช้ 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

1. Utility-First — ข้อเนี้ยเขาเคลมว่าเราสามารถใช้งาน custom css ได้โดยที่เราไม่ต้องเขียน css เลย เช่น การใส่พื้นหลังของ card ให้เป็นสีขาวสามารถทำได้โดยการเพิ่ม bg-white ที่ class

ref. https://tailwindcss.com/docs/utility-first

2. Responsive Design — การทำ responsive แบบง่ายมาก ๆ และเราสามารถ custom breakpoints เองได้ด้วย โดย config เพิ่มใน tailwind.js

ตัวอย่างการ custom breakpoints

Ref. https://tailwindcss.com/docs/responsive-design

ตัวอย่างการทำ responsive

การกำหนดขนาดของตัวอักษร เมื่อหน้าจอปกติให้ตัวอักษรอยู่ตรงกลาง และเมื่อจอขนาด sm ให้ตัวอักษรชิดซ้าย สามารถทำได้อย่างง่าย ๆ แบบนี้ class=“text-center sm:text-left”

Ref. https://tailwindcss.com/docs/responsive-design

3. Pseudo-Class Variants — ง่ายต่อการจัดการ style elements on hover, focus, และอื่น ๆ อีกมากมาย จะเห็นได้ว่าเราไม่ต้องไปเขียน CSS เลย

ตัวอย่างการจัดการ Hover

Ref. https://tailwindcss.com/docs/pseudo-class-variants#

4. Adding Base Styles — การกำหนด base style CSS สามารถกำหนดได้ โดยประกาศ @tailwind base และเขียน base style หลังจากนั้น โดยใช้ directive @apply

Ref. https://tailwindcss.com/docs/adding-base-styles

5. Extracting Components — เมื่อมี class อะไรที่เราใช้งานซ้ำ ๆ เช่น Button ก็สามารถที่จะสร้างมันขึ้นมาเป็น component เดียว

ตัวอย่างการ Extracting CSS components ด้วยการใช้ @apply

Ref. https://tailwindcss.com/docs/extracting-components

จากตัวอย่างจะเห็นว่า Button มีการเขียน class ซ้ำ ๆ แบบเดิม เราสามารถ Extract มันออกมาได้แบบนี้

HTML

Ref. https://tailwindcss.com/docs/extracting-components

CSS

Ref. https://tailwindcss.com/docs/extracting-components

ก็คือ เราจะเขียน CSS ใหม่ขึ้นมาแล้วกรุ๊ป พวก utilities class ของ tailwind ไว้โดยใช้ directive @apply การทำแบบนี้จะทำให้เราสามารถทำให้ลดการเขียนที่ซ้ำ ๆ ได้

6. Adding New Utilities — แน่นอนว่าเราก็คงอยากจะเขียน Utilities ของตัวเองไว้ใช้ Tailwind ก็ทำให้เราสามารถทำแบบนั้นได้ง่าย ๆ แบบนี้

Ref. https://tailwindcss.com/docs/adding-new-utilities

ตอนเอาไปใช้งานสามารถใช้ได้เหมือนตอนเขียน Html & CSS ทั่วไปเลย

Ref. https://tailwindcss.com/docs/adding-new-utilities

6. Functions & Directives — มันมี Function และ Directive ของตัวเองนะ ได้แก่

• @tailwind เอาไว้จัดการพวก base, components, utilities และscreens

• @apply เอาไว้ Custom CSS จาก utilities ที่มีอยู่แล้ว

Ref. https://tailwindcss.com/docs/functions-and-directives

• @variants เอาไว้จัดการ Variants เมื่อต้องการสร้าง utilities ของตัวเอง

Ref. https://tailwindcss.com/docs/functions-and-directives

• @responsive เอาไว้ทำ Responsive เมื่อต้องการสร้าง utilities ของตัวเอง

Ref. https://tailwindcss.com/docs/functions-and-directives

• @screen เอาไว้ทำจัดการกับหน้าจอขนาดต่าง ๆ เหมือน Meqia Query แต่ใน Tailwind จะยึดขนาดตาม breakpoints ที่กำหนดไว้ ซึ่งใช้งานโดยเรียกชื่อได้เลยแบบนี้

Ref. https://tailwindcss.com/docs/functions-and-directives

• theme() ฟังก์ชันนี้ทำให้เราสามารถเข้าถึงไฟล์ tailwind.config.js เพื่อใช้งานค่าใน configในนั้นได้ ซึ่งจะใช้ . ในการเข้าถึงค่า แบบนี้

.btn-blue { background-color: theme(‘colors.blue.500’);

จบแล้วกับ CORE CONCEPT ของ Tailwind CSS ทั้ง 6 ข้อ ต่ามาเรามาลอง set up มันกับ react กันเถอะ

ลงมือทำ 💪🏻

1. สร้างโปรเจกต์ โดยใช้

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

Jiidapa/try-tailwind-css

สรุป

เราว่าอันนี้ก็เป็นอีกทางเลือกหนึ่งของ CSS Framework เพราะมันใช้งานง่ายมาก แต่สำหรับเราที่ยังติด Style Components อยู่ก็ยังชั่งใจว่าจะเลือกใช้อันไหน ใจจริงคิดว่าอยากจะใช้สองอันเลย เพราะชอบตัว tailwind ตรงที่มันมีพวก common style ที่ปกติเราก็ config เองใน global css ตลอด เช่น พวก margin padding (mt-1, mx, my, p, pl บลาๆๆ) ต่าง ๆ แต่ก็ยังตัดขาดจาก CSS-in-JS ไม่ได้อยู่ดี 😂 เรื่อง Performance ยังไม่ได้ดูนะคะ ถ้าใช้สองตัวด้วยกัน พร้อมรับฟังความคิดเห็น ถ้าใครเคยใช้แล้วเป็นไง ช่วยแนะนำให้ด้วยนะคะ ขอบคุณที่อ่านมาจนจบค่ะ 😊

Reference

Tailwind CSS - A utility-first CSS framework for rapidly building custom designs

Setting Up Tailwind CSS In A React Project - Smashing Magazine