Angular 11 中使用 Tailwind CSS

新建Angular项目

使用Angular CLI 新建Angular v10或v11的项目

# 如果没有安装Angular/CLI, 运行
# npm i -g @angular/cli
ng new app-name --style=scss
cd app-name

添加 Tailwind CSS和PostCSS

npm i -D tailwindcss autoprefixer postcss postcss-import postcss-loader postcss-scss

添加ngx-build-plus

ng add ngx-build-plus

在根目录创建 webpack.config.js, 用来配置PostCCSS和Tailwind

# 创建webpack.config.js文件, 或者手动创建
touch webpack.config.js

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            ident: 'postcss',
            syntax: 'postcss-scss',
            plugins: [
              require('postcss-import'),
              require('tailwindcss'),
              require('autoprefixer'),
            ],
          },
        },
      },
    ],
  },
};

初始化Tailwind配置并添加Tailwind基础样式

初始化Tailwind配置

npx tailwindcss init

或者初始化完整配置

npx tailwindcss init --full

添加Tailwind基础样式到文件 src/style.scss

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

移除多余的CSS样式

可以使用 tailwind.config.js 中的 purge参数, 移除没有用到的样式

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

注: 要移除没有用到的样式, 必须设置 NODE_ENV=production
windows下可以安装cross-env

npm i -D cross-env

修改package.json

{
  // ....
  "scripts": {
     //...,
    // "start": "ng serve",
    "start": "ng serve --extra-webpack-config webpack.config.js",
    // "build": "ng build",
    "build": "ng build --extra-webpack-config webpack.config.js",
    // 新增Scripts
    "build:prod": "cross-env NODE_ENV=production ng build --extra-webpack-config webpack.config.js --prod",
    //...
  }
  //...
}