添加响应变体的自定义类不起作用答案

【问题标题】：Custom classes added responsive variants didn't work添加响应变体的自定义类不起作用
【发布时间】：2021-07-15 09:56:31
【问题描述】：

我尝试按照tailwindcss not using my custom class inside breakpoints 所说的去做，但它仍然对我不起作用。

这是我的代码：

<template>
  <div class="img-box-md overflow-hidden rounded-sm lg:img-box-lg">
    ...
  </div>
<template>
......
<style lang="postcss" scoped>
@responsive {
  .img-box-lg {
    height: 9.2vw;
  }
}
</style>

我尝试使用@responsive 使课程具有响应性，但未能发现它可以在大宽度的控制台中使用

【问题讨论】：

尝试用@variants responsive替换@responsive。

标签： tailwind-css

【解决方案1】：

您提供的代码是正确的。

演示：https://play.tailwindcss.com/HIvIPglMqf

关于使用 @variants responsive 而不是 @responsive 的问题评论可能会产生误导 - 它们是相同的（第二个只是更短的别名）。

文档：https://tailwindcss.com/docs/functions-and-directives#responsive

重新启动编译器并再次检查。我的猜测是您正在使用新的 JIT 模式，重新编译配置的问题是常见问题。

【讨论】：

我知道问题出在哪里：我使用 windicss 作为 Tailwind 的替代品，但它们的语法之间存在一些奇怪的差异。比如windicss的正确语法是@variants lg { .lg\:img-box-lg { height: 9.2vw; } }

【解决方案2】：

我知道问题出在哪里：我使用 windicss 作为 Tailwind 的替代品，但它们的语法之间存在一些奇怪的差异。比如windicss的正确语法是

@variants lg {
   .lg\:img-box-lg {
     height: 9.2vw;
   }
}

【讨论】：