Vue.js 如何将tailwindcss添加到vite？

我正在使用

0.16.6

，希望将vuepress站点迁移到使用vite

但是，我不确定如何使用tailwindcss配置vite

在我的

index.css中

@tailwind base;
@tailwind components;
@tailwind utilities;

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

---

经过一些挖掘，看起来我们必须在应用程序的根目录中包含一个

postsss.config.js

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

纱线尾风初始

注意：您可以使用npm

板条箱文件：

postsss.config.js

并添加：

module.exports={
 plugins: [
  require('tailwindcss'),
  require('autoprefixer'),
  ]
 }

将src/index.css文件的内容替换为：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

---

我写了一个vite tailwind插件

---

默认情况下，它启用了jit编译器，并且它还有一个tailwind配置查看器

添加测试，向Vue社区建议，然后在正式文档中包含测试后，我将更新答案，在此之前，这是一个备选方案（带有依赖项选项）

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";