Elasticsearch实战应用：构建高效搜索引擎

1.安装依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2.根目录下初始化配置文件tailwind.config.js

npx tailwindcss init

3.tailwind.config.js配置文件内容

module.exports = {
  purge: ["./src/*.{js,jsx,vue}",'./public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

purge是最后打包的时候扫描src下的所有vue，js结尾文件，如果没有用到的css将清理，压缩大小

4.vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 其他配置
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer')
          ]
        }
      }
    }
  }
});

5.src下随便找个地方放样式文件，这里我就放到了src/assets/下，然后添加内容（Tailwind的指令）

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

6.main.js引入

import '@/assets/tailwindcss.css'

7.测试