在tailwind CSS实施中，react app

Question

I使用NPM的VITE@最新命令安装了React应用程序

npm create vite@latest my-portfolio -- --template react

然后，我使用以下命令在'my-portfolio/'directory中安装了尾风CSS。

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p由于我的react版本为19，我手动创建了这些文件：

tailwind.config.js

• 并在IT中发布了以下代码

export default {
      content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
      theme: {
              extend: {},
      },
      plugins: [],
};

next我创建了Postcss.config.js在IT中添加了这个片段

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

SRC/index.css

中还添加了CSS线

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

在运行

npm run dev

命令后，我会得到以下错误eRror：

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

请帮助我解决这个问题！

解决错误##

您遇到的错误会发生，因为TailWindCSS软件包不再用作直接的PostCSS插件。相反，您需要安装 @tailwindcss/postcss软件包，并相应地更新您的postcss.config.js。

Answer 1

@tailwindcss/postcss

：

npm install @tailwindcss/postcss

修改您的

postcss.config.js

文件以包括新插件：

export default {
  plugins: [
    require('@tailwindcss/postcss'),
    require('autoprefixer'),
  ],
};

确保正确设置您的

tailwind.config.js

，并指向使用尾风类别的所有文件。例如：

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

驱动所有运行的开发服务器，并使用您的项目命令（例如）重新启动它们：

npm run dev