Skip to content
This repository was archived by the owner on Apr 15, 2025. It is now read-only.

tailwindcss 4 已发布,是否可以适配? #42

Closed
3 tasks done
nadirvishun opened this issue Feb 7, 2025 · 3 comments
Closed
3 tasks done

tailwindcss 4 已发布,是否可以适配? #42

nadirvishun opened this issue Feb 7, 2025 · 3 comments

Comments

@nadirvishun
Copy link

对问题的清晰和简明的描述

tailwindcss 4 发布,地址,感觉变动还挺多的,不清楚此插件是否可以直接适配?

推荐的解决方案

替代方案

No response

额外上下文

No response

检查

@ModyQyW
Copy link
Member

ModyQyW commented Feb 8, 2025

👋嘿,首先谢谢你对 tailwindcss 和本插件的关注。

正如 README 插件原理 中提到的一样,一个难点在于编译出来的文件存在小程序不支持的字符和元素,这个难点已经基本克服,即使是 tailwindcss v4 也应该能正常运行,除非是出现了不匹配的文件后缀(比如之前补充的小红书小程序相关文件没有经过处理导致报错),或出现了新的不支持的字符和元素未处理。类似于 oklch 颜色的问题,其实 postcss 都能处理,比如 postcss-preset-env 最新版已经包含了 @csstools/postcss-oklab-function 可以处理 oklch 颜色。

还没有克服的难点有两个:

  1. 小程序本身限制的问题。小程序本身存在限制,这个插件没办法全部突破。比如小程序不支持 background-image,这个插件没法突破。而小程序对于局部 CSS 变量的支持不太好,tailwindcss v4 增强动态化更加加重了这个问题,可以考虑通过将局部 CSS 变量提升到全局、处理命名冲突来使用,这个工程量不小,一直没有动工。
  2. 准确解析匹配的问题。unocss 和 weapp-tailwindcss 通过编译时来匹配处理,相对来说简单一些;这个插件直接处理生成的文件,解析和匹配非常复杂,可能会用到多层深度递归处理,见 使用v-for渲染iconify图标时,类名解析错误 #41自定义组件使用时有问题 #25 的说明,这种情况下性能很差、逻辑也复杂,工程量极其庞大,我个人感觉性价比很低。

目前来说,我个人更建议你使用 unocss + unocss-preset-uni 或 tailwindcss + weapp-tailwindcss 的方案,这个方案我可能会废弃掉。

Pin @sonofmagic @nei1ee @skiyee ,如果我说得不对,请指正 🙇

@sonofmagic
Copy link
Member

sonofmagic commented Feb 8, 2025

正在开发 weapp-tailwindcss@4 , 努力适配中 😄

已经在多个平台适配,详情请阅读: https://tw.icebreaker.top/docs/quick-start/v4

@ModyQyW ModyQyW pinned this issue Feb 11, 2025
@nadirvishun
Copy link
Author

目前已切换到weapp-tailwindcss,tailwindcss v4已经开始支持了:Tailwind CSS @4.x(实验性),自己测试可以正常使用。
真诚感谢大家的付出。

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants