Question

我尝试按照 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 使类具有响应性，但未能在大宽度的控制台中找到它

Answer 1

您提供的代码是正确的。

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

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

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

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

Answer 2

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

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

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

2 个答案: