likes
comments
collection

vue2 + vite 配置 tailwindcss 不生效

作者站长头像
站长
· 阅读数 35

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

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

vue2 + vite 配置 tailwindcss 不生效

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

经过各种探讨，参考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 不生效