iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

TailwindCSS - 從零開始系列 第 28

TailwindCSS 從零開始 - 如何在 Angular 中使用 TailwindCSS

TA

安裝說明

安裝環境

  • Angualr 11.2.6
  • node.js v14.17.0

建立一個 Angular CLI

可以參考這一篇 Angular 筆記 - Angular CLI 安裝與基本認識,這裡就不在說明。

安裝 TailwindCSS

輸入指令就會自動安裝 TailwindCSS 最新版本,PostCSS 以及 autoprefixer,詳細說明可以看此篇中文版官方文件

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

產生 TailwindCSS 配置檔

輸入指令:

npx tailwindcss init

安裝完成就會看到跟目錄有一個 tailwind.config.js 的設定檔案,點開內容如下:

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

引入基礎樣式

CSS

如果是用 CSS 格式,引入的話要使用 @tailwind

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

SCSS

如果是 SCSS 的話,引入要用 @import,因為有裝 PostCSS 所以會自動編譯。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

移除不必要的樣式

因為 TailwindCSS 是 Utility-First,就是一大包檔案,為了避免有太多無用的樣式導致專案肥大,所以可以設定什麼檔案才要留樣式,像是 Angular 設定大概就是 .html.scss 以及 .ts 檔案了,在 purge 中設定如下:

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: ["./src/**/*.html", "./src/**/*.scss"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

安裝智能套件 Tailwind CSS IntelliSense

tailwind plugin

一定要安裝智能套件,套件傳送門,使用說明可參照這裡

智能套件故障排除

stylelint

要安裝 stylelint 智能套件故障排除的套件,因為 VSCode 看不懂 @tailwindcss 的標籤,並且要取消工作區的 CSS 與 SCSS Validate 的設定。

CSS Validate

css validate

SCSS Validate

scss

最後在設定檔 setting.json 裡面貼上這一段

{
  "stylelint.config": {
    "rules": {
      "at-rule-no-unknown": [true, {
        "ignoreAtRules": [
          "tailwind",
          "apply",
          "layer",
          "variants",
          "responsive",
          "screen"
        ]
      }],
      "declaration-block-trailing-semicolon": null,
      "no-descending-specificity": null
    }
  },
  "css.validate": false,
  "scss.validate": false
}

在 Angular 使用 TailwindCSS JIT 模式

從 Angular12 有完整支援 TailwindCSS JIT 模式,所以專案若沒有向下兼容的需要,建議可以升級到 v.12 以上喔!

參考資料


上一篇
TailwindCSS 從零開始 - 翻轉卡片實戰:TailwindCSS feat CSS
下一篇
TailwindCSS 從零開始 - TailwindCSS 3.0.0-alpha.1 釋出
系列文
TailwindCSS - 從零開始30

尚未有邦友留言

立即登入留言