集成TailwindCSS v4 alpha到Vite时，已装依赖仍报错的原因？

核心配置错误 #

TailwindCSS v4 alpha的PostCSS插件是独立的@tailwindcss/postcss包，而非核心tailwindcss包。如果你的vite.config.js中导入的是tailwindcss而非@tailwindcss/postcss，Vite会无法找到正确的PostCSS插件，从而触发安装提示。

修正后的vite.config.js配置示例：

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

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

缓存干扰 #

Vite会缓存构建配置和依赖解析结果，即使修正了配置，旧缓存仍可能导致错误。执行以下操作清除缓存：

• 删除项目根目录下的node_modules/.vite文件夹
• 重启Vite时添加--force参数：vite --force

依赖未正确安装 #

虽然package.json中声明了@tailwindcss/postcss，但可能存在依赖未实际安装或版本不匹配的情况：

• 执行npm install或yarn install重新安装依赖
• 检查package.json中tailwindcss和@tailwindcss/postcss的版本是否均为v4 alpha系列（如4.0.0-alpha.xxx），确保版本一致

Vite配置优先级问题 #

部分情况下，Vite可能仍在尝试读取PostCSS的默认配置文件（即使你已删除postcss.config.js），可以在vite.config.js中显式禁用默认配置文件读取：

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss()],
      config: false, // 禁用自动读取postcss.config.js
    },
  },
})

内容的提问来源于stack exchange，提问作者Keval