รู้จักกับ 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 เสร็จแล้วเรียบร้อย

intro-01

tailwind คืออะไร ?​

ข้อดี​

ข้อพิจารณา​

install tailwind​

tailwind คืออะไร ?

ข้อดี

ข้อพิจารณา

install tailwind