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 มาได้เลยเดี๋ยวมาดูกันว่าติดตรงไหน
<div class="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8"> | |
<div class="flex items-center space-x-4"> | |
<img src="../assets/full-stack-radio.png" alt="" width="88" height="88" class="flex-none rounded-lg bg-slate-100" /> | |
<div class="min-w-0 flex-auto space-y-1 font-semibold"> | |
<p class="text-cyan-500 dark:text-cyan-400 text-sm leading-6"> | |
<abbr title="Episode">Ep.</abbr> 128 | |
</p> | |
<h2 class="text-slate-500 dark:text-slate-400 text-sm leading-6 truncate"> | |
Scaling CSS at Heroku with Utility Classes | |
</h2> | |
<p class="text-slate-900 dark:text-slate-50 text-lg"> | |
Full Stack Radio | |
</p> | |
</div> | |
</div> | |
<div class="space-y-2"> | |
<div class="relative"> | |
<div class="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden"> | |
<div class="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2" role="progressbar" aria-label="music progress" aria-valuenow="1456" aria-valuemin="0" aria-valuemax="4550"></div> | |
</div> | |
<div class="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow"> | |
<div class="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5"></div> | |
</div> | |
</div> | |
<div class="flex justify-between text-sm leading-6 font-medium tabular-nums"> | |
<div class="text-cyan-500 dark:text-slate-100">24:16</div> | |
<div class="text-slate-500 dark:text-slate-400">75:50</div> | |
</div> | |
</div> | |
</div> | |
<div class="bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center"> | |
<div class="flex-auto flex items-center justify-evenly"> | |
<button type="button" aria-label="Add to favorites"> | |
<svg width="24" height="24"> | |
<path d="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
</svg> | |
</button> | |
<button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Previous"> | |
<svg width="24" height="24" fill="none"> | |
<path d="m10 12 8-6v12l-8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
<path d="M6 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
</svg> | |
</button> | |
<button type="button" aria-label="Rewind 10 seconds"> | |
<svg width="24" height="24" fill="none"> | |
<path d="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
<path d="M5 5v3.111c0 .491.398.889.889.889H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
</svg> | |
</button> | |
</div> | |
<button type="button" class="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center" aria-label="Pause"> | |
<svg width="30" height="32" fill="currentColor"> | |
<rect x="6" y="4" width="4" height="24" rx="2" /> | |
<rect x="20" y="4" width="4" height="24" rx="2" /> | |
</svg> | |
</button> | |
<div class="flex-auto flex items-center justify-evenly"> | |
<button type="button" aria-label="Skip 10 seconds"> | |
<svg width="24" height="24" fill="none"> | |
<path d="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
<path d="M19 5v3.111c0 .491-.398.889-.889.889H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
</svg> | |
</button> | |
<button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Next"> | |
<svg width="24" height="24" fill="none"> | |
<path d="M14 12 6 6v12l8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
<path d="M18 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
</svg> | |
</button> | |
<button type="button" class="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500"> | |
1x | |
</button> | |
</div> | |
</div> |
แต่เดี๋ยวก่อนนอกจากข้อดีแล้ว ยังก็ยังมีข้อเสียอยู่นะ
ข้อเสีย
ถ้าเราทำงานเป็นทีม อาจจะต้องมีการสื่อสารที่ดีว่าจะเปลี่ยนจากการ 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)