# 如何在 Angular 16 加入 Tailwind CSS 網頁框架

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

### 建立 Angular 專案與初始化 Tailwind CSS

經過多個專案的嘗試，我發現 Tailwind CSS 官方的 [Install Tailwind CSS with Angular](https://tailwindcss.com/docs/guides/angular) 文件寫的非常到位，完全照著做也不會踩到什麼地雷，Tailwind CSS 跟 Angular 整合的相當不錯！👍

1.  建立 Angular 16 獨立元件專案
    
    ```bash
    ng new demo1 --standalone --routing --style css --skip-tests
    ```
    
2.  進入 `demo1` 目錄
    
    ```bash
    cd demo1
    ```
    
3.  安裝 Tailwind CSS 相關套件
    
    ```bash
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init
    ```
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/e33c3519a4dc68b34fb6-9b5f52f8-ee2a-4e69-a0fa-35121bfb7793.webp)
    
    這個步驟會產生一個尚未設定過的 `tailwind.config.js` 檔案。
    
    ```typescript
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [],
      theme: {
        extend: {},
      },
      plugins: [],
    }
    ```
    
4.  將所有 Angular 的 Template 路徑加入到 `tailwind.config.js` 設定檔中
    
    你可以用 `./src/**/*.{html,ts}` 加入到 `content` 這個陣列屬性中！
    
    ```typescript
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./src/**/*.{html,ts}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }
    ```
    
5.  最後，找到你的全域 CSS 檔案 `./src/styles.css` 並加入以下三行
    
    ```css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    ```
    

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

### 後記

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

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9a892cab97862a942acc-afdb5a8e-1556-48df-acf5-9531dd11fa0e.webp)

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

### 相關連結

-   [Tailwind CSS](https://tailwindcss.com/) - Rapidly build modern websites without ever leaving your HTML.
-   [Tailwind CSS Components](https://tailwindcomponents.com/) - 600+ Free Examples and Templates
-   [Tailwind CSS Cheat Sheet](https://tailwindcomponents.com/cheatsheet/)
-   [Install Tailwind CSS with Angular - Tailwind CSS](https://tailwindcss.com/docs/guides/angular)