vue2 + vue-cli 使用tailwindcss踩坑

环境

• vue 2.6
• vue-cli 4.5
• element-ui 2.6.11
• tailwindcss 2.2.19
• postcss 8.4.49
• autoprefixer 9.8.8

问题

1. tailwind 中w-20生效,w-[200px]不生效

• 版本低于2.0不支持,使用2.2.19
• tailwind要开启jit模式

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  ... //省略其它配置
  }

3. postcss,taildwind,autoprefixer版本兼容问题

• 使用下面提供的版本

4. w-[200px]开发模式,只在打包时生效切换成w-20不生效

• 要开启开发模式

// package.json
  "scripts": {
    "serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve", // tailwind开发模式
    }

配置文件

• package.json

{
  "name": "quality-control-alone-fe",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve", // tailwind开发模式
    "build": "cross-env TAILWIND_MODE=build vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.39.0",
    "element-ui": "^2.15.7",
    "vue": "^2.6.11",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.26.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "autoprefixer": "^9.8.8",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.4.1",
    "babel-plugin-import": "^1.13.3",
    "cross-env": "^7.0.3",
    "eslint": "^6.7.2",
    "eslint-config-airbnb": "3.1.0",
    "eslint-config-prettier": "6.15.0",
    "eslint-plugin-prettier": "3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "postcss": "^8.4.49",
    "prettier": "^2.5.1",
    "sass": "^1.44.0",
    "sass-loader": "8.0.0",
    "tailwindcss": "^2.2.19"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

• tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

• postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {
      config: './tailwind.config.js',
    },
    autoprefixer: {},
  },
};