วิธีติดตั้ง Tailwind CSS ใน Angular

บทความนี้สอนวิธีติดตั้ง Tailwind CSS ใน Angular โดยเริ่มตั้งแต่สร้างโปรเจค Angular และติดตั้ง Tailwind CSS ด้วยโปรแกรม npm พร้อมตั้งค่า tailwind.config.js และทดลองเรียกใช้ Tailwind CSS ในเโปรเจค Angular พร้อมแสดงผลลัพธ์ออกสู่หน้าจอ

 

Tailwind CSS คือ utility-first CSS framework ที่ช่วยให้นักพัฒนาสามารถสร้าง User Interface (UI) ที่สวยงาม และรองรับบนอุปกรณ์ที่หลากหลาย ในรูปแบบที่ตัวเองต้องการได้อย่างรวดเร็วผ่านคำสั่ง CSS และ Components ที่มีให้บริการ

 

ตัวอย่าง วิธีติดตั้ง Tailwind CSS ใน Angular

1. สร้างโปรเจค Angular ด้วยคำสั่ง ng new ตามด้วยชื่อโปรเจค จากนั้นเข้าไปในโปรเจคดังกล่าว

ng new my-angular-tailwind
cd my-angular-tailwind

 

2. ใช้คำสั่ง npm เพื่อติดตั้ง Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

 

3. สร้างไฟล์ tailwind.config.js ในโปรเจค Angular

npx tailwindcss init

 

4. เปิดไฟล์ tailwind.config.js และเพิ่มโค้ด "./src/**/*.{html,ts}" ลงใน content: [ … ]

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

5. เปิดไฟล์ styles.less หรือ styles.css (หรือ style อื่นๆ ที่เลือกตอนติดตั้งโปรเจค Angular) อยู่ใน folder src และเพิ่มโค้ดดังนี้

@tailwind base;
@tailwind components;
@tailwind utilities;

 

6. เปิดไฟล์ src/app/app.component.html และเขียนโค้ดดังนี้

<main class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
  <div class="text-center">
    <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">ยินดีต้อนรับ Tailwind CSS</h1>
    <p class="mt-6 text-base leading-7 text-gray-600">utility-first CSS framework</p>
    <div class="mt-10 flex items-center justify-center gap-x-6">
      <a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">หน้าแรก</a>
      <a href="#" class="text-sm font-semibold text-gray-900">ติดต่อเรา <span aria-hidden="true">&rarr;</span></a>
    </div>
  </div>
</main>

 

7. รันโปรเจค Angular ด้วยคำสั่ง

ng serve

 

8. เข้าผ่าน URL http://localhost:4200 หรือ URL อื่นๆ หากสำเร็จจะขึ้นหน้าจอดังรูป

 

สรุป Tailwind CSS คือ utility-first CSS framework ทำให้เราสามารถสร้างหน้าเว็บไซต์ที่สวยงามแบบที่ตัวเองต้องการได้โดยใช้ CSS หรือ Components ที่มีให้บริการ โดยบทความนี้เราได้เรียนรู้วิธีการติดตั้ง การตั้งค่า และทดลองเรียกใช้ Tailwind CSS พร้อมแสดงผลลัพธ์ออกสู่หน้าเว็บไซต์