Antd Pro使用tailwindcssTailwindcss正在被越来越多的人使用，我也看到了不少人对它的好评。对于

Tailwindcss正在被越来越多的人使用，我也看到了不少人对它的好评。对于后台系统而言，当团队使用习惯之后，确实会提升很大的效率，并且有利于规范团队的样式名。之前我担心的一点是整个tailwindcss的样式文件太过庞大，后面了解到tailwindcss可以在打包时进行优化，将实际用到的样式才打包进去。那么就没后顾之忧了，来小试牛刀一下吧。

因为安装使用起来还是遇到了不少麻烦，官网的文档感觉很杂乱，网上文章也是错误百出，所以在此记录一下。

安装

首先需要安装tailwindcss和autoprefixer（postcss由于是antd pro的依赖项，所以可以不用安装。但是依赖的postcss的大版本是7，所以需要安装postcss 7兼容版本的tailwindcss）

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat autoprefixer@^9

在/config/config.ts中增加一行配置

extraPostCSSPlugins: [require('tailwindcss')],

在src目录下新建tailwind.css文件

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

在global.less中引入tailwind.css

@import 'tailwind.css';

优化

经过测试，antd pro的simple模板正常打包出来为2.92M，加入tailwindcss后为5.9M，足足3M大小，所以必须要进行优化。

首先初始化一个tailwindcss.js配置文件

npx tailwindcss init

在配置文件中，对需要进行检查的文件进行配置。tailwindcss会对配置项进行检查，删除配置项中未使用到的样式。

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

在项目中使用一个简单的tailwindcss的样式后，打包项目。发现包的大小还是2.92M，约等于每增加。查看打包后的文件发现只有用到的样式打包进去了，启动项目发现样式可以正常展现。

tailwindcss还有些其他的优化配置，可以自行查看文档，一般来说只需要配置这个就可以了。

OK，现在就可以开始愉快的开发了