将 tailwind v4 alpha 与 vite postcss 配置集成

Question

所以我已经成功地让 Tailwind v4 alpha 为初学者工作了。它使用

postcss.config.js

文件：

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  }
};

但是我读到我应该能够在我的

vite.config.js

中执行类似的操作（并删除

postcss.config.js

文件）：

@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
+import tailwind from "tailwindcss";
 
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
@@ -29,4 +30,9 @@ export default defineConfig(async () => ({
       ignored: ["**/src-tauri/**"],
     },
   },
+  css: {
+    postcss: {
+      plugins: [tailwind],
+    },
+  },
 }));

不幸的是，以下错误引起了它的丑陋的头：

[plugin:vite:css] [postcss] 看起来您正在尝试直接使用

tailwindcss

作为 PostCSS 插件。 PostCSS 插件已移至单独的包中，因此要继续将 Tailwind CSS 与 PostCSS 一起使用，您需要安装

@tailwindcss/postcss

并更新您的 PostCSS 配置。

更不幸的是，我的

package.json

已经包含

@tailwindcss/postcss

作为开发依赖项：

"devDependencies": {
    "@sveltejs/adapter-static": "^3.0.5",
    "@sveltejs/kit": "^2.7.0",
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@tailwindcss/postcss": "4.0.0-beta.4",
    "@tauri-apps/cli": "^2",
    "svelte": "^5.0.0",
    "svelte-check": "^4.0.0",
    "tailwindcss": "4.0.0-beta.4",
    "tslib": "^2.8.0",
    "typescript": "^5.5.0",
    "vite": "^5.4.10"
  }

为什么还是出现这个错误？

Answer 1

根据Vite集成文档：

如果您使用 Vite 或 Vite 支持的框架（如 SvelteKit 或 Remix），请安装 Tailwind 以及我们新的专用 Vite 插件：

$ npm install tailwindcss@next @tailwindcss/vite@next

接下来，将我们的 Vite 插件添加到您的

vite.config.ts

文件中：

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss()
   ],
});

最后，将 Tailwind 导入到您的主 CSS 文件中：

@import "tailwindcss";

因此，对于您的项目，您会：

• 卸载

  @tailwindcss/postcss

• 安装

  @tailwindcss/vite@next

vite 配置中的

• import

  @tailwindcss/vite

  ，将其添加到

  plugins

  数组中。
• 将

  @import "tailwindcss"

  添加到应用程序导入的某些全局 CSS 文件中。