vue2使用 tailwind css

官网
tailwindcss
直接安装

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

会自动创建一个tailwind.config.js

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

在main.js引入

import './assets/css/tailwindcss.css'

还需要在vue.config.js文件中配置

 css: {
        loaderOptions: {
          postcss: {
            plugins: [require('tailwindcss'), require('autoprefixer')]
          }
        }
      }

如果配置vue.config.js不生效，直接去postcss-loader里面加

{
    loader: 'postcss-loader',
    options: {
      ...
      // 直接加
      plugins: [require('tailwindcss'), require('autoprefixer')]
    }
  }

tailwindcss 可能和组件库样式冲突`

module.exports = {
  purge: [],
  // 增加类名前缀
  prefix: 'ldt-', // text-center => ldt-text-center
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  // 禁用基础样式
  corePlugins: {
    preflight: false,
  }
}

重启项目即可