tailwindcss 接入教程

tailwindcss.com/

本文章环境：webpack4工程

优点

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

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

对工程的影响

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

结论: 可以放心使用

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

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

2. 升级旧的依赖

以下2个包更到最新

{
    "autoprefixer": "^10.2.5",
    "postcss-loader": "^5.2.0"
}

3. 增加2个配置文件

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

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

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

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

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

import 'tailwindcss/tailwind.css

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