无法让 TailwindCSS 与 React + Vite 一起使用

Question

我按照官方文档中的 TailwindCSS 安装过程进行操作，但无法使其正常工作。

这是我的相关文件的样子：

tailwind.config.js

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

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

index.css

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

Vite 设置中的默认文件结构没有变化。我的 js 文件位于 /src 的子目录中

我尝试按照建议更改 vite.config.js，但修改后或未更改的版本都不起作用

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

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

最后，我当然尝试重新启动服务器哈哈

非常感谢任何帮助:)

Answer 1

之前删除了它，index.css 文件导入丢失了