TailwindCSS：自己的响应式类答案

【问题标题】：TailwindCSS: Own responsive classTailwindCSS：自己的响应式类
【发布时间】：2021-08-26 19:58:17
【问题描述】：

我正在使用 TailwindCSS，我创建了这样的实体：

@layer screens {
  @responsive {
    .flex-row-around {
      @apply flex flex-row justify-around;
    }

    .flex-col-around {
      @apply flex flex-col justify-around;
    }
  }
}

我已经生成了样式表，现在我正在尝试使用它：

<div class="flex-col-around md:flex-row-around">
  ...
</div>

但我的样式没有添加。做错了什么？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

TailwindCSS 没有screens 层。看起来您正在尝试创建一个新实用程序，在这种情况下，您需要使用 utilities 层。

@layer utilities {
  @responsive {
    .flex-row-around {
      @apply flex flex-row justify-around;
    }

    .flex-col-around {
      @apply flex flex-col justify-around;
    }
  }
}

这是供参考的文档：

https://tailwindcss.com/docs/functions-and-directives#layer

附：如果您想使用新的即时编译，它将自动生成响应实用程序，而无需指定它们。此功能目前处于试验阶段，但我已经在生产环境中使用了几个月，没有出现任何问题。

@layer utilities {
  .flex-row-around {
    @apply flex flex-row justify-around;
  }

  .flex-col-around {
    @apply flex flex-col justify-around;
  }
}

https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode

【讨论】：

非常感谢。但是你能举出任何例子来说明我如何使用@tailwind screen 指令吗？
@screen 指令适用于您想要编写自己的 CSS 时。如果您以前使用过媒体查询，则可以将它们替换为 screen 指令。所以@media (min-width: 640px) 变成了@screen sm。它不会生成新的实用程序，只允许您在 CSS 的媒体查询中使用 Tailwind 屏幕尺寸。
不，不是@screen。我的意思是“@tailwind 屏幕”就像这里tailwindcss.com/docs/functions-and-directives#tailwind
我明白了。默认情况下，所有响应式类都放在 css 的末尾。这允许您在更大的屏幕尺寸上覆盖样式。例如，flex flex-col md:flex-row 将在较小的屏幕尺寸下具有列的弯曲方向，在较大的屏幕尺寸下具有行的弯曲方向。这仅适用于响应类是在基类之后定义的。如果首先定义响应类，flex flex-col md:flex-row 将与flex flex-col 相同。 @tailwind screens 让您定义在 CSS 中生成屏幕变体的位置。