tailwindcss在Vue2使用，不生效解决

tailwindcss官网
tailwindcss

直接安装

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

创建postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

创建tailwind.config.js

npx tailwindcss init

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

在main.js引入

 import "tailwindcss/tailwind.css";

网上很多教程到这里会结束了，但我这样做的时候不生效，翻了很久才知道。还需要配置vue.config.js才会生效

在vue.config.js文件中配置

本质是往postcss-loader配置里面添加插件

// vue.config.js
module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          plugins: [require('tailwindcss'), require('autoprefixer')]
        }
      }
    }
  }

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

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

参考文章https://godlanbo.com/blogs/25

tailwindcss 可能和组件库样式冲突

tailwind.config.js设置禁用基础样式

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

去测试

⚠️注意：如果添加了类名前缀要这样使用text-gray-700 => 你添加的类名前缀-text-gray-700

https://www.tailwindcss.cn/docs/text-color

样式如果没改变，重启项目！！！重新运行加载！！！

基础样式css内容参考：
https://unpkg.com/tailwindcss@2.2.19/dist/base.css
https://unpkg.com/browse/tailwindcss@3.0.23/src/css/preflight.css