vue2 引入 tailwind

版本

• node: v16.14.2
• vue: 2.6.14

安装

# 安装 tailwind 低版本及相关插件
pnpm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# 创建 postcss.config.js、tailwind.config.js
npx tailwindcss init -p

postcss.config.js

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

tailwind.config.js

module.exports = {
  purge: [
    "./src/App.vue",
    "./src/pages/**/*.{vue,js,ts,jsx,tsx}",
    "./src/components/**/*.{vue,js,ts,jsx,tsx}",
  ],
  darkMode: 'class', // or 'media' or 'class'
  mode: 'jit', // 是否开启jit模式，开启以后编译会更快，当然，tailwindcss版本需要在2.1以上
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

App.vue

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