DEV Community

alternativeboy
alternativeboy

Posted on

มาเล่น Tailwind CSS กับ Angular กัน

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
Enter fullscreen mode Exit fullscreen mode
  • สร้างโปรเจกต์ Angular
ng new angular-tailwind
cd angular-tailwind
Enter fullscreen mode Exit fullscreen mode
  • ติดตั้ง Tailwind Css ใน project
// NPM
npm install -D tailwindcss postcss autoprefixer

// Yarn
yarn add tailwindcss

// สร้างไฟล์ Tailwind config
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode
  • ไปตั้งค่าใน tailwind.config.js ( อยู่ระดับเดียวกับ package.json ) เพิ่ม "./src/*/.{html,ts}", ใน content
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode
  • เพิ่ม Tailwind ไปใน style ของเรา ( ตรงนี้อาจจะแตกต่างกันถ้าหากเลือก style config ตอนสร้างโปรเจ็ค Angular )

1.1 เลือก Style แบบ CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

1.2 เลือก Style แบบ SCSS หรืออย่างอื่น

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Enter fullscreen mode Exit fullscreen mode
  • Start build process
ng serve
Enter fullscreen mode Exit fullscreen mode

ลองเล่น 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 ได้ง่ายขึ้น

ตามไปดู Code ได้ที่

Repository : Github

Discussion (0)