https://tailwindcss.com/

webpack需升级到5：从webpack4升级到webpack5的爬坑记录

优点

或许可以完全不用写css, 或者只需写很少的css

写起来更方便更快, 也能提升维护效率

对工程的影响

  1. 体积几乎无影响
    • 配合webpack生产环境run build, 会按需生成最小的依赖文件(预计不超过10kb, 得益于tree-shaking, 亲测有效),
  1. 打包时间增加10s左右

结论: 可以放心使用

1. 安装依赖, 并且升级旧的依赖

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 升级旧的依赖

以下2个包更到最新

  1. {
  2.     "autoprefixer": "^10.2.5",
  3.     "postcss-loader": "^5.2.0"
  4. }

3. 增加2个配置文件

postcss.config.js (根目录下的)

  1. module.exports = {
  2.   plugins: {
  3.     tailwindcss: {},
  4.     autoprefixer: {}
  5.   }
  6. }

tailwind.config.js (根目录下的)

  1. module.exports = {
  2.   purge: [
  3.     './src/**/*.html',
  4.     './src/**/*.vue',
  5.     './src/**/*.js'
  6.   ],
  7.   darkMode: false, // or 'media' or 'class'
  8.   theme: {
  9.     extend: {}
  10.   },
  11.   variants: {},
  12.   plugins: []
  13. }

4. 在main.js引入（入口文件）

import 'tailwindcss/tailwind.css

（原创整理，有疑问可以私信。如果有用，谢谢点赞~）