Oct 21, 2022

使用 Angular 安裝 TailwindCSS

6 minutes to read

安裝環境

Angular 14.2.3 Node 14.16.1 編輯器 vscode

建立 Angular 新專案

ng new <project name>
cd <project name>

安裝 TailwindCSS

npm install -D tailwindcss postcss autoprefixer

寫這篇文章的時後，所安裝的是 TailwindCSS v3 版本以下將是 TailwindCSS v3 版介紹

產生 tailwindcss 配置檔

npx tailwindcss init

在根目錄底下會多出一支 tailwind.config.js 所有 TailwindCSS 配置都在 tailwind.config.js 設定

設定 tailwindcss 配置

module.exports = {
  prefix: '',
  important: true,
  darkMode: 'class',
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

在 tailwindcss v3 移除了 mode: 'jit' 設定,

prefix: 前綴設定

若有特殊需求的話，可以設定前綴，一般比較少設定。

prefix: 'tw-',

<!-- 生效 -->
<div class="tw-text-red-500 tw-font-bold">hello world</div>

<!-- 無效 -->
<div class="text-red-500">hello world</div>

important: Tailwind 權重設定

設為 true 的話，有關於 T 中面 cstykele 後面都會加上 !important 適用情境：有時後需要修改到套件框架裡的樣式

content: 設定需要使用到 Tailwind 的檔案路徑

darkMode: 黑暗模式

<!-- Dark mode 關閉 -->
<html>
  <body>
    <div class="bg-white dark:bg-black">這是白色背景</div>
  </body>
</html>

<!-- Dark mode 開啟 -->
<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">這是黑色背景</div>
  </body>
</html>

theme: 客製化設定

例：顏色設定

保留 Tailwind 預設顏色，新增顏色。

theme: {
  extend: {
    colors: {
      brown: {
        50: "#fdf8f6",
        100: "#f2e8e5",
        200: "#eaddd7",
        300: "#e0cec7",
        400: "#d2bab0",
        500: "#bfa094",
        600: "#a18072",
        700: "#977669",
        800: "#846358",
        900: "#43302b",
      },
    },
  },
}

theme: {
  colors: ({ colors }) => {
    return {
      ...colors,
      brown: {
        50: "#fdf8f6",
        100: "#f2e8e5",
        200: "#eaddd7",
        300: "#e0cec7",
        400: "#d2bab0",
        500: "#bfa094",
        600: "#a18072",
        700: "#977669",
        800: "#846358",
        900: "#43302b",
      },
    };
  },
  extend: {},
}

自訂義顏色 tailwind，給使用者很多預設顏色，但有些用不太到，只需要幾種特定的顏色，與一些特定顏色

//需引入 tailwind 顏色設定
const colors = require("tailwindcss/colors");

module.exports = {
  ...略
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      yellow: colors.yellow,
      brown: {
        50: "#fdf8f6",
        100: "#f2e8e5",
        200: "#eaddd7",
        300: "#e0cec7",
        400: "#d2bab0",
        500: "#bfa094",
        600: "#a18072",
        700: "#977669",
        800: "#846358",
        900: "#43302b",
      },
    },
  },
  plugins: [],
};

module.exports = {
  ...略
  theme: {
    colors: ({ colors }) => {
      return {
        black: colors.black,
        white: colors.white,
        gray: colors.gray,
        yellow: colors.yellow,
        brown: {
          50: "#fdf8f6",
          100: "#f2e8e5",
          200: "#eaddd7",
          300: "#e0cec7",
          400: "#d2bab0",
          500: "#bfa094",
          600: "#a18072",
          700: "#977669",
          800: "#846358",
          900: "#43302b",
        },
      };
    },
    extend: {},
  },
  plugins: [],
};

初始化 tailwind

在 ./src/styles.css 或 ./src/styles.scss 引入樣式

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

開始使用

<h1 class="text-3xl font-bold underline">Hello world!</h1>

完成！

出現 SassError

在一個專案裡通常會有很多機率也會使用到其他框架，雖然這範疇不算是屬於 tailwindcss 裡。當出現 SassError: @use rules must be written before any other rules. 時

解決方式：必須將引用 scss 檔的路徑 @use '路徑' 放置最上面

vscode 警示排除

檔案 => 喜好設定 => 設定

分別在 CSS、LESS、SCSS 裡都改為 ignore

或是在 setting.json 裡加上這幾行

"css.lint.unknownAtRules": "ignore",
"scss.lint.unknownAtRules": "ignore",
"less.lint.unknownAtRules": "ignore"

vscode 必要套件安裝

Tailwind CSS IntelliSense

Prettier 自動排序

Automatic class sorting with Prettier

需安裝 prettier 套件可到 vscode：Prettier 套件看介紹

安裝

npm install -D prettier prettier-plugin-tailwindcss

安裝後 prettier 也會幫忙格式化 tailwindcss 囉

Angular Window Resize Event (偵測視窗縮放事件) 初探 Python，用 Python 來寫個爬蟲吧

對這篇文章有什麼想法嗎?