vue2 + vite 配置 tailwindcss 不生效

按照网上的方法配置,包括官网的 vue3 + vite 配置 tailwind 文档。

配置好久都没有效果,编译出来的文件是这样的

vue2 + vite 配置 tailwindcss 不生效_第1张图片

可以看到样式并没有编译出来。

经过各种探讨,参考vue2配置的tailwind,发现有人需要单独在 vue.config.js加一个配置

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

抱着试试看的态度,在 vite.config.js 加上对应配置

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

完美解决!!~ 非常nice~

vue2 + vite 配置 tailwindcss 不生效_第2张图片

你可能感兴趣的:(vue2 + vite 配置 tailwindcss 不生效)