The Will Will Web

Tailwind CSS 是一個目前正夯的前端 CSS 框架，用於快速開發現代網頁應用程序，在我們公司也在許多專案使用。它提供了一組可重用的 CSS 類別，這些類別可以應用於 HTML 元素，以快速設計和定義網頁的外觀和排版。本篇文章我將分享如何在 Angular 16 專案加入 Tailwind CSS 相關資源。

建立 Angular 專案與初始化 Tailwind CSS

經過多個專案的嘗試，我發現 Tailwind CSS 官方的 Install Tailwind CSS with Angular 文件寫的非常到位，完全照著做也不會踩到什麼地雷，Tailwind CSS 跟 Angular 整合的相當不錯！👍

1. 建立 Angular 16 獨立元件專案

   ng new demo1 --standalone --routing --style css --skip-tests
   

2. 進入 demo1 目錄

   cd demo1
   

3. 安裝 Tailwind CSS 相關套件

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init
   

   

   這個步驟會產生一個尚未設定過的 tailwind.config.js 檔案。

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. 將所有 Angular 的 Template 路徑加入到 tailwind.config.js 設定檔中

   你可以用 ./src/**/*.{html,ts} 加入到 content 這個陣列屬性中！

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./src/**/*.{html,ts}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

5. 最後，找到你的全域 CSS 檔案 ./src/styles.css 並加入以下三行

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

大功告成，簡單幾個步驟，你就可以開始在 Angular 任何元件的範本中使用 Tailwind CSS 了！👍

後記

因為設定的過程過於簡單，而且根本沒碰到 angular.json 設定檔：

我原本以為他可能不會透過 PostCSS 做樣式的後處理(Post-processing)，把沒用到的 Utility class 移除，但實際測試後發現，Angular 跟 Tailwind CSS 真的整合的相當不錯，這些動作其實都已經內建在 ng serve 與 ng build 之中，所以最後真正 build 出來的 CSS 檔案其實非常小，他只會加入你在 Angular Template 中有用到的 class 而已！👍

相關連結

• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
• Tailwind CSS Components - 600+ Free Examples and Templates
• Tailwind CSS Cheat Sheet
• Install Tailwind CSS with Angular - Tailwind CSS