[Bug] tailwindcss plugin support v4

[haiweilian]

What happens?

tailwindcss 插件不支持 v4 版本。

Mini Showcase Repository(REQUIRED)

升级 tailwindcss 到 v4

TypeError: Cannot read properties of undefined (reading 'tailwind')
    at getTailwindBinPath (/Users//node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]__@types+r_i4pfxhxgmqg6sv4h6i4irmckdu/node_modules/@umijs/plugins/dist/tailwindcss.js:105:44)

https://github.com/haiweilian/vivy-nest-admin/tree/main/vivy-react

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现，并上传到你的 GitHub 仓库

How To Reproduce

Steps to reproduce the behavior: 1. 2.

升级 tailwindcss 到 v4

Expected behavior 1. 2.

TypeError: Cannot read properties of undefined (reading 'tailwind')
    at getTailwindBinPath (/Users//node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]__@types+r_i4pfxhxgmqg6sv4h6i4irmckdu/node_modules/@umijs/plugins/dist/tailwindcss.js:105:44)

Context

• Umi Version: 4.4.4
• Node Version: 22.0.0
• Platform: Mac

[github-actions[bot]]

由于缺乏足够的信息，我们暂时关闭了该 Issue。请修改（不要回复） Issue 提供最小重现以重新开启。谢谢。

[timerlau]

我也遇到了同样的问题

[mdddj]

同样的问题

[Asa0oo0o0o]

参考这个把项目中所有涉及到 tailwind 的内容都删干净后再pnpm umi g tailwindcss，项目可以正常运行且 tailwind 生效

[telanflow]

参考这个把项目中所有涉及到 tailwind 的内容都删干净后再pnpm umi g tailwindcss，项目可以正常运行且 tailwind 生效

这个issue是指的tailwindcss v4版本有问题

[mdddj]

已经升完了，按照官方教程来升级就行，要加一个配置 .umirc.ts

  extraPostCSSPlugins: [
    require("@tailwindcss/postcss")
  ],

[htfire]

一样的问题

[yfgongweb]

我也遇到了，官方插件默认 tailwind3，升级到 tailwind4 报info - Umi v4.4.4 info - Preparing... fatal - TypeError: Cannot read properties of undefined (reading 'tailwind') at getTailwindBinPath (/node_modules/@umijs/plugins/dist/tailwindcss.js:104:44) at Hook.fn (/node_modules/@umijs/plugins/dist/tailwindcss.js:45:21)

[HP-283]

一样的问题, 要怎么解决呢?

[timerlau]

fatal - TypeError: Cannot read properties of undefined (reading 'tailwind')

antd pro 升级后，就提示这个了！

[ananiahfox]

已经升完了，按照官方教程来升级就行，要加一个配置 .umirc.ts

extraPostCSSPlugins: [ require("@tailwindcss/postcss") ],

加了也不行， 请问你是怎么解决的？

[mdddj]

已经升完了，按照官方教程来升级就行，要加一个配置 .umirc.ts extraPostCSSPlugins: [ require("@tailwindcss/postcss") ],

加了也不行， 请问你是怎么解决的？

先按照 tailwindcss官方教程操作一遍，再加上面的配置

[xxclouddd]

这个问题主要要解决两个问题： 1.重新编译tailwind添加到head中； 2.处理antd的reset.css问题；

一、重新编译tailwind添加到head中 1.安装tailwindcss，@tailwindcss/postcss 2.在umric中添加postcss配置extraPostCSSPlugins: [require("@tailwindcss/postcss")] 3.删掉umrc中的tailwindcss配置 4.这时候tailwind编译的结果还没添加到html的head中，在src目录下添加global.css，在里面添加@import "tailwindcss"; umjs会讲global.css注入到head里。

二、处理antd的reset.css问题； tailwind4使用@layer base，而antd的reset.css不使用@layer，导致reset.css的优先级更高，这时候tailwind是不起作用的。解决方案如下 1.在项目下新建antd-reset-layer.css文件 2.copy文件antd/dist/reset.css下的所有代码到antd-reset-layer.css，并添加@layer 在文件开始，格式如下 @layer base { .... } 3.在umrc中添加配置 alias: { "antd/dist/reset.css": require.resolve("./antd-reset-layer.css"), }, 4.删除.umi，重新编辑就可以了。没空写umjs插件了！

[Ray-56]

@xxclouddd reset的问题这样确实可以解决。 不知道你有没有遇见到 anticon 的优先级问题？你是如何处理的

[Ray-56]

anticon 已解决。问题是在另外一个包中引入来旧版的css导致

[Ray-56]

anticon 已解决。问题是在另外一个包中引入来旧版的css导致

又出现了，奇奇怪怪

[WuQic]

这个问题主要要解决两个问题： 1.重新编译tailwind添加到head中； 2.处理antd的reset.css问题；

一、重新编译tailwind添加到head中 1.安装tailwindcss，@tailwindcss/postcss 2.在umric中添加postcss配置extraPostCSSPlugins: [require("@tailwindcss/postcss")] 3.删掉umrc中的tailwindcss配置 4.这时候tailwind编译的结果还没添加到html的head中，在src目录下添加global.css，在里面添加@import "tailwindcss"; umjs会讲global.css注入到head里。

二、处理antd的reset.css问题； tailwind4使用@layer base，而antd的reset.css不使用@layer，导致reset.css的优先级更高，这时候tailwind是不起作用的。解决方案如下 1.在项目下新建antd-reset-layer.css文件 2.copy文件antd/dist/reset.css下的所有代码到antd-reset-layer.css，并添加@layer 在文件开始，格式如下 @layer base { .... } 3.在umrc中添加配置 alias: { "antd/dist/reset.css": require.resolve("./antd-reset-layer.css"), }, 4.删除.umi，重新编辑就可以了。没空写umjs插件了！

这个在antd V4.x + tailwindcss V4.x 无效，每次用tailwind的去重写 antd的样式都无效 都要加 "!" imptant 才能覆盖 有更优雅的方案让umijs V4 plugin 支持兼容antd v4吗

[Ray-56]

又花了点时间来排查这个问题了。最终定位到了问题的原因，如果在umi的配置中加入了 antd 的相关主题配置就会在head中插入一个 style

这个 style 就是 icon 颜色优先级不正确的的元凶。 目前的解决方案是不用配置的 antd，主题相关配置卸载 app.tsx 中的 ConfigProvider 中。如果有人有类似的困惑可以参考我的解决方案

[mozillo]

有没有antd v5.27.5 +umijs v4.5.2 下 tailwindv3升级到 tailwindv4.1.15的教程，也是提示TypeError: Cannot read properties of undefined (reading 'tailwind')