รู้จักกับ Tailwind
สามารถดู video ของหัวข้อนี้ก่อนได้ ดู video
ในหัวข้อนี้เราจะมาพูดถึง CSS Utility ที่จะช่วยทำให้ CSS ทำงานง่ายขึ ้น
tailwind คืออะไร ?
Tailwind คือ utility-first CSS framework ในการคลุม css ออกมาผ่าน class โดยแทนที่จะเขียนเป็น CSS ตรงๆ เราจะเรียก style ผ่าน class ของ HTML แทน
เช่น หากเราต้องการทำ style flexbox ให้อยู่ตรงกลาง ใน css ปกติเราก็จะประกาศแบบนี้
<style>
.container {
display: flex;
align-item: center;
justify-content: middle;
}
.item {
flex: 1;
}
</style>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
ถ้าเป็น tailwind ก็จะกลายเป็นแบบนี้แทน
<body>
<div class="flex items-center justify-center">
<div class="flex-1">Item 1</div>
<div class="flex-1">Item 2</div>
</div>
</body>
ตัว Core Concept สามารถอ่านได้จากที่นี่ (มันจะเป็นการปรับ idea จากการเขียน CSS มาเป็น Utility class แทน) https://tailwindcss.com/docs/utility-first
สิ่งนี้แหละคือ utility class ของ tailwind ที่จะทำให้เราไม่ต้องเรียกใช้ css ได้
ข้อดี
-
Rapid Prototyping ด้วย utility class นั้นถ้าใช้คล่องสามารถขึ้น design ได้ไวมาก (โดยที่แทบจะไม่ต้องเพิ่ม CSS แยกไปเลย เพิ่มตรงๆผ่าน HTML ได้ทั้งหมด)
-
Consistency and Customizable tailwind สามารถกำหนด config เริ่มต้นให้กับ style ได้ จะให ้ small, medium, large หรือสี primary, secondary เป็นอะไรก็สามารถกำหนดได้เลย = จะทำให้ project มี style ที่เหมือนๆกันได้ทั้งระบบผ่าน utility class
-
Reduced CSS Bloat ลดจำนวนการเขียน css ลงได้
-
Support responsive design ด้วย utility class มีการ implement การใช้ media query (breakpoints) ไว้อยู่แล้ว ไม่จำเป็นสร้าง css แยกก็สามารถทำ responsive ได้
ข้อพิจารณา
-
Learning Curve แรกๆอาจจะต้องอาศัยการเรียนรู้หนักหน่อย เพื่อให้เกิดความเคยชิน (เป็นการปรับแนวคิดจาก CSS มาเป็น utility class แทน)
-
Not Component-Based Out of the Box
- มันไม่เหมือน bootstrap ที่เป็น style สำเร็จรูปนะ Tailwind มันจะ low level กว่านั้น คือเป็นเพียงตัวแทนของ css เท่านั้น
- เพราะฉะนั้นยังอาศัย CSS skill ตามเดิมอยู่
- HTML Verbosity ถ้าไม่ได้ grouping utility class เลย ใน html utility class จะยาวมาก (ยาวจัดเลยแหละ)
เช่นแบบนี้ เพื่อให้ได้ style ปุ่มที่ถูกต้องอันเดียว (ซึ่งอันนี้สามารถแก้ได้จากการทำ grouping utility class นะครับ)
<button class="bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95">
Tailwind Button
</button>
- Performance concern ตอน compile ออกมา CSS จะใหญ่หน่อย (เรื่องนี้ต้องแก้ผ่านการ setup ที่เหมาะสม)
install tailwind
tailwind support ในหลายๆ Framework มาก สำหรับ Vue นั้นจะแนะนำให้ follow ตาม guideline นี้
https://tailwindcss.com/docs/guides/vite#vue
โดยการ
- ลง tailwind css โดยการลง dependencies เพิ่ม และทำการ run คำสั่งเริ่มต้นเพื่อสร้างไฟล์
tailwind.config.js
และpostcss.config.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- ทำการ config path tailwind ให้ support การใช้ tailwind
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
- ที่
src/style.css
ทำการเพิ่ม init base style ของ tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;
- import style เข้าไปใน
main.js
import './style.css' // เพิ่มบรรทัดนี้มา
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
เสร็จแล้วลองทดสอบดูว่าได้ไหม โดยการลองเพิ่ม style เข้าไปใน HomeView.vue
ดูลงใน template
<!-- ... -->
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
<!-- ... -->
</template>
ผลลัพธ์ถ้าออกมาทรงนี้ได้ แปลว่าเราลง tailwind เสร็จแล้วเรียบร้อย