[Bug]: Taro平台，引入html.css有些样式就无法使用了

[Ryan-CW-Code]

weapp-tailwindcss 版本

4.0.8

框架 & 小程序平台

Taro 4.0.9

最小复现bug的代码仓库链接

No response

复现bug的步骤

import '@tarojs/taro/html.css'; 引入html.css后使用div，部分样式就会失效，比如flex。但是不引用这个默认浏览器css样式，跟html标签的默认样式就不一样了

    <>
      <div className='h-[300px]'></div>
      <View className='flex'>
        <Text className='w-14 flex-none '>Hello </Text>
        <Text className='w-64 flex-1 '>Hello </Text>
        <Text className='w-64 flex-1 '>Hello </Text>
      </View>

      <div className='flex flex-row'>
        <div className='w-64 flex-1'>Hello1 </div>
        <div className='w-64 flex-1'>Hello1 </div>
        <div className='w-64 flex-1'>Hello1 </div>
      </div>
    </>

引入import '@tarojs/taro/html.css';后样式就无法生效。 3.x版本时没有这个问题

预期是什么？

正常的样式表现

实际发生了什么？

1

运行环境

win11 nodejs20

其他附加信息

No response

[sonofmagic]

你现在使用的 tailwindcss 版本是什么? 有最小化的复现案例吗?

3.x版本时没有这个问题

这个是指 weapp-tailwindcss@3 还是 tailwindcss@3？

[Ryan-CW-Code]

感谢回复，weapp-tailwindcss@3和tailwindcss@3是我项目在使用的，最近打算升级到tailwindcss@4. 我先在我项目尝试移植发现很多样式都丢失了， 随后我在您提供的Taro示例工程https://github.com/icebreaker-template/taro-webpack-tailwindcss-v4 tailwindcss@4版本示例中进行测试。

逐一对比示例代码和我项目代码，发现https://docs.taro.zone/docs/use-h5 使用html标签引入html4/html5的内置样式后，就会发生样式丢失现象。

查看wxml，使用div引入html样式后和view生成的css样式一摸一样，div会加入h5-div类名。使用div的就会丢失样式

[sonofmagic]

了解，你先可以使用 weapp-tailwindcss@4 + tailwindcss@3 也是兼容的 tailwindcss@4 breaking change 经常会产生，不够稳定。 我先自己复现一下你这种情况。

[sonofmagic]

https://github.com/icebreaker-template/taro-vite-tailwindcss-v4/tree/html https://github.com/icebreaker-template/taro-webpack-tailwindcss-v4/tree/html

这是我尝试复现的 2 demo，似乎没有出现你那种情况，你可以跑跑看看

[Ryan-CW-Code]

今天好好测试了一下，weapp@4版本和tailwindcss@3版本正常。 weapp@4版本和tailwindcss@4版本，每个组件都需要引入import '@tarojs/taro/html.css'才可以使用html标签，理论上是全局引入一次就可以的。 nutui也用到了'@tarojs/taro/html.css'，所以nutui的样式就全乱了。

[sonofmagic]

怀疑是 tailwindcss@4 里面的 lightningcss 的问题，因为原先 @import 是 postcss-import 处理的，现在变成了 lightningcss 处理了，这个问题我持续关注一下。另外假如你有复现案例，那就太好了，可以加速这个问题的解决。