Angular11配置TailwindCSS 2

1.创建一个Angular应用

ng new tailwindcss-angular-app

当询问CSS扩展语言时，选择SCSS

2.安装TailwindCSS

下载TailwindCSS依赖

yarn add tailwindcss --dev 或者 npm install tailwindcss -D

现在我们将安装@angular-builders/custom-webpack用于定制webpack构建步骤，并安装postcss用于构建Tailwind

yarn add @angular-builders/custom-webpack postcss --dev
或者
npm install @angular-builders/custom-webpack postcss -D

创建 webpack.config.js

function patchPostCSS(webpackConfig, tailwindConfig, components = false) {
  if(!tailwindConfig){
    console.error('Missing tailwind config :', tailwindConfig);
    return;
  }
  const pluginName = "autoprefixer";
  for (const rule of webpackConfig.module.rules) {
    if (!(rule.use && rule.use.length > 0) || (!components && rule.exclude)) {
      continue;
    }
    for (const useLoader of rule.use) {
      if (!(useLoader.options && useLoader.options.postcssOptions)) {
        continue;
      }
      const originPostcssOptions = useLoader.options.postcssOptions;
      useLoader.options.postcssOptions = (loader) => {
        const _postcssOptions = originPostcssOptions(loader);
        const insertIndex = _postcssOptions.plugins.findIndex(
          ({ postcssPlugin }) => postcssPlugin && postcssPlugin.toLowerCase() === pluginName
        );
        if (insertIndex !== -1) {
           _postcssOptions.plugins.splice(insertIndex, 0, ["tailwindcss", tailwindConfig]);
        } else {
          console.error(`${pluginName} not found in postcss plugins`);
        }
        return _postcssOptions;
      };
    }
  }
}
module.exports = (config) => {
  const tailwindConfig = require("./tailwind.config.js");
  patchPostCSS(config, tailwindConfig, true);
  return config;
};

通过angular cli命令修改angular.json

ng config projects.<your-project>.architect.build.builder @angular-builders/custom-webpack:browser
ng config projects.<your-project>.architect.build.options.customWebpackConfig.path webpack.config.js
ng config projects.<your-project>.architect.serve.builder @angular-builders/custom-webpack:dev-server
ng config projects.<your-project>.architect.test.builder @angular-builders/custom-webpack:browser
ng config projects.<your-project>.architect.test.options.customWebpackConfig.path webpack.config.js

初始化TailwindCSS

要为TailwindCSS创建配置文件，请执行以下操作：

npx tailwind init

TailwindCSS附带默认样式，但您可以使用此文件自定义主题、断点、颜色、间距等！

注入Tailwind

在src/style.scss中注入Tailwind的基础、组件和实用程序样式

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

接下来就可以启动程序验收效果了！

打包

经常用TailwindCSS的朋友知道，我们在程序打包的时候需要把没有用到的TailwindCSS属性进行剔除，不然会造成样式文件体积过大。

安装dotenv
使用dotenv加载一个环境变量，告诉Tailwind是否需要清除未使用的类

yarn add dotenv --dev
或者
npm install dotenv -D

接下来修改tailwind.config.js文件，以清除未实用的类，我们只需要访问ENABLE_PURGE环境变量（默认false）,如果ENABLE_PURGE为true,则在任何.html和.scss文件中搜索我们使用的类

require('dotenv').config();
const enablePurge = process.env.ENABLE_PURGE || false;
module.exports = {
  purge: [],
  purge: {
    enabled: enablePurge,
    content: [
      './src/**/*.html',
      './src/**/*.scss'
    ]
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

最后别忘了在根目录创建.env文件，并且ENABLE_PURGE设置为true，需要注意的是，本地开发不需要这样做，但我强烈建议在测试环境和生产环境中清除任何未使用的类

ENABLE_PURGE=true

之后进行打包就可以了

参考 - UPDATED: Angular 11 and TailwindCSS 2 | by Jacob Neterer | Medium

最后编辑于：2021.02.23 21:32:14