group 和 peer 使用限制

group 使用注意事项

在 tailwindcss 中，我们常常会这样写:

<div class="group">
  <view class="bg-pink-400 group-hover:bg-yellow-400">
    group tapped
  </view>
</div>

这样在最外层的 div 进入 hover 状态时，内部的子元素中的 group-hover 就会生效，从而改变样式。

然而，在小程序中，伪类 :hover 是不起作用的，取而代之的是 hover-class 这样一个属性，所以这种情况我们可以这么写：

<view class="group" hover-class="tapped">
  <view class="bg-pink-400 group-[.tapped]:bg-yellow-400">
    group tapped
  </view>
</view>

这样在 group 进入 hover 状态时，bg-yellow-400 就会生效了。

相关 issue：#14

peer 使用注意事项

我们一般使用 peer 来标记一个元素，再使用各种 peer-* 来让它后续兄弟节点的样式生效。这些主要生成大量包含 ~ 后续兄弟选择器 的 css 代码。

然而很不幸，在小程序中 ~ 这个选择器非常容易报错，它前面只能跟 class 选择器，不能跟伪类，不然会报错:

// 报错
// .xxx:invalid~.xxx-invalid:visible {
//   visibility: visible;
// }
// 不报错
.xxx~.xxx-invalid:visible {
  visibility: visible;
}

所以你要么就不使用 peer 特性，如果需要此特性请使用内嵌 class 的方式来使用:

<view>
  <view class="w-20 h-20 peer bg-gray-300" hover-class="tapped" />
  <view class="w-20 h-20 peer-[.tapped]:bg-red-400 bg-blue-400"></view>
</view>

前一个方块按压后进入 hover 状态 ，后面那个就变成红色。

出现 unexpected token "~" 错误

出现这个错误后，你应该把对应报错的相关 peer、peer-* 删掉，注意是删掉，请不要注释，因为 tailwindcss 中也会从注释中提取字符串，所以注释掉是没有效果的。

删掉之后，你需要重新启动一下你的应用（例如 yarn dev:weapp），不然导致错误的 css 还是会存在，导致项目崩溃。