DEV Community

alternativeboy
alternativeboy

Posted on

5 2

มาเล่น 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 มาได้เลยเดี๋ยวมาดูกันว่าติดตรงไหน

<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>
view raw gistfile1.txt hosted with ❤ by GitHub

แต่เดี๋ยวก่อนนอกจากข้อดีแล้ว ยังก็ยังมีข้อเสียอยู่นะ

ข้อเสีย

  • ถ้าเราทำงานเป็นทีม อาจจะต้องมีการสื่อสารที่ดีว่าจะเปลี่ยนจากการ 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

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay