angular使用material组件库和tailwindcss样式

0、前情提要：原文：Angular 11 中使用 Tailwind CSS - 简书 (jianshu.com)

1、新建项目

ng new ice-app

2、常用操作

　　 运行
        npm start
        ng serve
        ng serve --port 4600
    打包
        npm run build
        npm run build --prod
        ng build
        ng build --prod --aot
    清理缓存
        npm cache clean --force

3、添加 angular material 组件库

ng add @angular/material
angular.json 的 styles 下添加 "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
app.module.ts 添加并导入 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

4、添加 Tailwind CSS和PostCSS

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

5、添加ngx-build-plus

ng add ngx-build-plus

6、在根目录创建 webpack.config.js, 用来配置PostCCSS和Tailwind，内容如下

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

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

初始化Tailwind配置
    npx tailwindcss init
 或者初始化完整配置
    npx tailwindcss init --full
添加Tailwind基础样式到文件 src/style.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
html,body {height: 100%;}
body {margin: 0;font-family: Roboto, "Helvetica Neue", sans-serif;}
button:focus {outline: unset !important;}

8、移除多余的CSS样式，在 tailwind.config.js 进行配置，

安装cross-env
npm i -D cross-env

//tailwind.config.js文件内容如下
module.exports = {
  important: true,
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: ["./src/**/*.html", "./src/**/*.ts"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

9、修改package.json

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