Tailwind CSS在Vite + React中无法工作。

Question

我使用 Vite 创建了一个 React 应用程序，并使用此处提供的文档安装了 Tailwind：Tailwind CSS 安装指南。

然而，它没有捕获任何 Tailwind 样式。

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

index.css

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

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

我安装的唯一依赖项是react-router-dom。

我该如何解决这个问题？

- Prajul Aaditya

Answer 1

如果你已经按照这里步骤#2所述安装了postcss和autoprefixer（https://tailwindcss.com/docs/guides/vite），你应该在package.json的“devDependencies”部分看到这两个库。如果它们被安装了，你需要在项目根目录下创建一个名为postcss.config.cjs的文件，并将以下内容添加进去：

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

- Ed Lucas

---

谢谢，我已经在devDependecies中安装了所有三个库，postcss.config.cjs没有，这很有帮助。但是文档中没有提到它。还感谢您在语法上纠正问题。 - Prajul Aaditya

Answer 2

在按照官方文档的指导操作后，您可能希望检查 package.json 文件，并查看 devDependencies 下是否出现了 tailwind。另外，请检查 postcss.config.cjs 文件并确认以下内容是否存在：

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

希望这有所帮助。

- htrgotoh

---

谢谢，posts.config.cjs文件没有，这很有帮助。 - Prajul Aaditya

Answer 3

要解决这个问题，你需要运行下面的命令行，生成位于项目根目录中的tailwind.config.js和postcss.config.js文件，然后重新运行你的应用程序，问题应该就会解决。 访问：https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

- Hudu