似乎在自定义的 custom-tab-bar 下不生效

[byteHulk]

[byteHulk]

在 index.json 中也加入了 { "component": true, "styleIsolation": "shared" }

[byteHulk]

"@tarojs/taro": "3.0.23",

[ItsRyanWu]

你好，这个现象应该和用什么开发框架没有关系，是由于小程序的自定义 tab bar 是独立于页面之外的单独的实例，它的样式作用域是单独的，所以无法被 Tailwind/Windi CSS 生成的样式作用到。 目前我还没有想到有什么解决方法，因为这一限制来自于小程序的页面架构设计。 建议在自定义 tab bar 中仅使用常规的 CSS 样式声明，不使用 Tailwind/Windi CSS，我会在文档中更新相关信息。

[byteHulk]

你好，这个现象应该和用什么开发框架没有关系，是由于小程序的自定义 tab bar 是独立于页面之外的单独的实例，它的样式作用域是单独的，所以无法被 Tailwind/Windi CSS 生成的样式作用到。 目前我还没有想到有什么解决方法，因为这一限制来自于小程序的页面架构设计。 建议在自定义 tab bar 中仅使用常规的 CSS 样式声明，不使用 Tailwind/Windi CSS，我会在文档中更新相关信息。

好的 还有个问题是目前我没有找到在 taro/react 框架下设置 styleIsolation 的方法，我的组件还是不能用 Tailwind/Windi CSS

[byteHulk]

如果有解决办法的话 我可以帮助完善 example 代码

[ItsRyanWu]

你好，这个现象应该和用什么开发框架没有关系，是由于小程序的自定义 tab bar 是独立于页面之外的单独的实例，它的样式作用域是单独的，所以无法被 Tailwind/Windi CSS 生成的样式作用到。 目前我还没有想到有什么解决方法，因为这一限制来自于小程序的页面架构设计。 建议在自定义 tab bar 中仅使用常规的 CSS 样式声明，不使用 Tailwind/Windi CSS，我会在文档中更新相关信息。

好的 还有个问题是目前我没有找到在 taro/react 框架下设置 styleIsolation 的方法，我的组件还是不能用 Tailwind/Windi CSS

你想表达的是你在自定义组件比如 component.jsx 中使用了类似 className="bg-red-200" 这种语法后然后引用在页面上最终无效吗？如果是的话，我试了下暂时没有找到方法复现该问题。 另外，用 Taro 这个框架编写小程序最终编译出来的小程序包中其实是没有组件这个概念的，你在源码中的页面上引用的所有组件最终都会被编译到当前页面上，所以和小程序原生组件相关的设置比如 styleIsolation 自然是毫无用处的，文档中所说的 styleIsolation 的相关设置和 Taro 项目是没有关系的。 也就是说，即使目前你在组件中不能使用 Tailwind 语法编写样式这个问题的确存在，也不是 styleIsolation 的问题，而是另有其他原因。 麻烦你提供一个可复现该问题的最小可行 demo，我会继续研究，谢谢。

[byteHulk]

你好，这个现象应该和用什么开发框架没有关系，是由于小程序的自定义 tab bar 是独立于页面之外的单独的实例，它的样式作用域是单独的，所以无法被 Tailwind/Windi CSS 生成的样式作用到。 目前我还没有想到有什么解决方法，因为这一限制来自于小程序的页面架构设计。 建议在自定义 tab bar 中仅使用常规的 CSS 样式声明，不使用 Tailwind/Windi CSS，我会在文档中更新相关信息。

好的 还有个问题是目前我没有找到在 taro/react 框架下设置 styleIsolation 的方法，我的组件还是不能用 Tailwind/Windi CSS

你想表达的是你在自定义组件比如 component.jsx 中使用了类似 className="bg-red-200" 这种语法后然后引用在页面上最终无效吗？如果是的话，我试了下暂时没有找到方法复现该问题。 另外，用 Taro 这个框架编写小程序最终编译出来的小程序包中其实是没有组件这个概念的，你在源码中的页面上引用的所有组件最终都会被编译到当前页面上，所以和小程序原生组件相关的设置比如 styleIsolation 自然是毫无用处的，文档中所说的 styleIsolation 的相关设置和 Taro 项目是没有关系的。 也就是说，即使目前你在组件中不能使用 Tailwind 语法编写样式这个问题的确存在，也不是 styleIsolation 的问题，而是另有其他原因。 麻烦你提供一个可复现该问题的最小可行 demo，我会继续研究，谢谢。

https://github.com/byteHulk/circles-web 在这里哈

[ItsRyanWu]

你的仓库由于 node-sass 版本过低不支持我目前的系统环境😅，但观察了一下应该是由于 Post.js 组件的后缀不是 Post.jsx 导致的，插件内部的逻辑对于 React 框架为了节省性能仅对 .jsx 和 .tsx 文件做处理。

[byteHulk]

好的 感谢