Vite不根据配置构建tailwind

Question

我react-ts使用创建了一个新应用程序yarn create @vitejs/app my-app --template react-ts。

我使用安装了顺风yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest。

我初始化了顺风：npx tailwindcss init -p。

我设置from并to在postcss.config.js：

module.exports = {
  from: 'src/styles/App.css',
  to: 'src/styles/output.css',
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

我App.css在以下位置创建了一个文件src/styles：

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

根据https://vitejs.dev/guide/features.html#postcsspostcss-load-config ，允许任何有效的语法。from并且to 似乎是被允许的。

当我调用yarn devwhich本质上运行时vite，我的应用程序正在启动，没有构建错误，但未生成顺风输出。

我究竟做错了什么？

Answer 1

确保您的 postcss.config.js 文件位于您的应用程序根目录中

Answer 2

在您的 vite.config.js 中，确保在您的插件中包含 Tailwind。

plugins: [react(),tailwindcss()],

另外，您可以使用以下命令导入 Tailwind。

import tailwindcss from 'tailwindcss';

Answer 3

from并且to不是必需的。

我必须更新importcss 文件的语句以main.tsx指向src/styles/App.css哪个将导致vite运行postcss.