space-y-3 space-x-3 这类写法不起作用问题的参考，与外层套view标签，或者 virtualHost 解决方案

[sonofmagic]

描述这个Bug
字节小程序space-y-3 space-x-3 这类写法不起作用，微信小程序良好

代码url

https://github.com/sonofmagic/tw-space-issues

如何重现
space-y-3 space-x-3 添加造元素dom

期望行为(可选)
兼容或者提供配置项

屏幕截图(可选)

运行环境

• OS: [e.g. iOS]
• Nodejs: 16x
• Framework: taro

[sonofmagic]

这个是字节小程序的代码片段：https://developer.open-douyin.com/ide/minicode/MCrg6Qq

然后我在抖开平台的小程序社区找到了反馈：https://developer.open-douyin.com/forum/mini-app/post/625655d3806b24d2e4dbe214

字节在生产模式下处理空格有问题

微信小程序是ok的，虽然字节小程序几乎和微信一个模板API啥的几乎一模一样，但是他们好像没有优化到这个点，咱们的tailwindcss插件没啥问题，转换正确

另外就是还有一种曲线救国的方案，当然这个是在taro工程里，使用Px或者PX，也就是space-y-[12PX]，这样taro在编译的时候，taro内置的postCSS插件将不处理这个转换操作，达到效果

[sonofmagic]

理论上只要配置taro 的 css 压缩选项 csso ，不压缩空格即可

https://taro-docs.jd.com/docs/config-detail#cssminimizer

https://github.com/css/csso#minifysource-options

[gaokun]

我这边发现在小程序上, 也不好用了.

其他的class都正常, 就space的不行. 压根不生成

[sonofmagic]

考虑到小程序的组件(shadow root)实现方式，默认情况下 space 这一类带有子选择器的，只对 view 元素生效

推荐组件使用 <view> 标签包裹组件

还有图上你下面是2个组件的父元素上使用的 space class，要看是否生效可以看子项中第2个元素和后面元素：

[gaokun]

是的, 确实是因为我的children是自定义组件, 导致的这个问题

在自定义组件中添加
options: { virtualHost: true, } 即可解决此问题.