TailwindCSS 从零开始 - 如何在 Angular 中使用 TailwindCSS

安装说明

安装环境

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
}