TailwindCSS 无法与 Vite + React 配合使用

Question

我正在 Vite + React + JavaScript 项目上使用https://tailwindcss.com/docs/guides/create-react-app初始化 TailWindCSS但无法让它工作，当我时，似乎 postcss 和 autoprefixer 没有安装尝试手动安装，出现以下错误

warning Pattern ["postcss@^8.4.20"] is trying to unpack in the same destination "C:\\Users\\NUR\\AppData\\Local\\Yarn\\Cache\\v6\\npm-postcss-8.4.20-64c52f509644cecad8567e949f4081d98349dc56-integrity\\node_modules\\postcss" as pattern ["postcss@^8.4.18","postcss@^8.4.20"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > tailwindcss@3.2.4" has unmet peer dependency "postcss@^8.0.9".

Answer 1

我按照文档使用 Vite 和 React 安装 tailwind，但它也不起作用。

不要手动安装软件包，而是使用以下命令npx tailwindcss init -p 手动创建文件postcss.config.cjs：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

不要忘记指南的其余部分，它会起作用

Answer 2

我按照文档使用 Vite 和 React 安装 tailwind，但它也不起作用。然后我在 vite.config.js 中添加这些更改并且它起作用了。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});