Tailwind CSS คืออะไรกันนะ Tailwind คือ Utility-First CSS Framework ตัวนึงที่จะช่วยทำให้เรา styling element ได้อย่างรวดเร็วโดยที่เราไม่ต้องไม่ต้องไปเขียนคลาสเอง
ข้อดี
- เพื่อป้องกัน ชื่อ class ซ้ำกันกับ parent component เป็นสาเหตุที่ทำให้เกิด style collision
- การ Styling ในโปรเจกต์ก็จะไปในทิศทางเดียวกัน
- ขนาดของ Css ที่ compile ออกมามีขนาดที่เล็กมากๆ ( เดี๋ยวจะเขียนบทความเพิ่มเติมเกี่ยวกับการ optimization ของ Tailwind ว่าเล็กตามคำโฆษณาที่เค้าโม้ไว้รึเปล่า 😂)
หลังจากที่เกริ่นมาสักพักเรามาเริ่มติดตั้ง Tailwind ใน Angular กัน
การติดตั้ง
- ติดตั้ง Angular CLI ด้วย npm หรือ yarn
// NPM
npm install -g @angular/cli
// Yarn
yarn add @angular/cli
- สร้างโปรเจกต์ Angular
ng new angular-tailwind
cd angular-tailwind
- ติดตั้ง Tailwind Css ใน project
// NPM
npm install -D tailwindcss postcss autoprefixer
// Yarn
yarn add tailwindcss
// สร้างไฟล์ Tailwind config
npx tailwindcss init
- ไปตั้งค่าใน tailwind.config.js ( อยู่ระดับเดียวกับ package.json ) เพิ่ม "./src/*/.{html,ts}", ใน content
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
- เพิ่ม Tailwind ไปใน style ของเรา ( ตรงนี้อาจจะแตกต่างกันถ้าหากเลือก style config ตอนสร้างโปรเจ็ค Angular )
1.1 เลือก Style แบบ CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
1.2 เลือก Style แบบ SCSS หรืออย่างอื่น
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
- Start build process
ng serve
ลองเล่น Tailwind CSS กัน ให้ลอง copy code ด้านล่างนี้ไปแปะใน app.html ดูว่าออกมาสวยงามไหมถ้าใช่ ขอแสดงความยินดีด้วย เราได้ติดตั้ง Tailwind CSS เรียบร้อยแล้ว แต่ถ้าไม่ Comment มาได้เลยเดี๋ยวมาดูกันว่าติดตรงไหน
แต่เดี๋ยวก่อนนอกจากข้อดีแล้ว ยังก็ยังมีข้อเสียอยู่นะ
ข้อเสีย
ถ้าเราทำงานเป็นทีม อาจจะต้องมีการสื่อสารที่ดีว่าจะเปลี่ยนจากการ styling element แบบที่เคยทำมาเป็นการใช้ Tailwind
ฝั่ง html ลายตามาก เพราะ styling ทุกอย่างเราเอามาใส่ในฝั่ง html ไม่ได้เขียนแยกเป็น style file ( css, scss หรืออื่นๆ )
อาจจะต้องใช้เวลาเรียนรู้นิดนึงว่า Design system ของ Tailwind นั้นเป็นยังไงเช่น Color, Spacing, Sizing, Typography และอีกมากมาย
สรุป
Tailwind CSS ถือว่าเป็นอีกทางเลือกนึงที่เราจะกำจัดปัญหาเรื่อง Style collision แล้วลดเวลาเรื่อง Design system แถมยังลดเวลาในการ styling element อีกด้วย
แถม
ติดตั้ง Extension เสริมเพื่อให้ใช้ Tailwind ได้ง่ายขึ้น
- InteliJ จริงๆ ฝั่ง Jetbrain support อยู่แล้ว แต่ถ้าอยากอ่านละเอียดไปที่ ลิ้งค์ ได้เลย
- VSCode ตามลิ้งค์นี้ได้เลย
ตามไปดู Code ได้ที่
Repository : Github
Top comments (0)