在 TAILWIND 的 css 中添加自定义响应类

Question

添加时

<div class="md:grid-flow-col">

什么都没发生。这是因为当我查看文档时 md:grid-flow-col 不包含在顺风 css 中。

在我的 styles.css 中，我可以看到我可以用于顺风的所有类。例如：

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

我想补充：

.md\:grid-flow-col{
    grid-auto-flow: column;
  }

因为我无法应用<div class="md:grid-flow-col"> 并按照我想要的方式更改网格布局。
每当我保存文档时，我的更改都会自动删除。

有谁知道如何添加当我尝试在响应式布局中使用它们时适用的类？

Answer 1

这里只做类组件，不需要断点/响应式设计

Adding custom style

@layer components {
  grid-flow-col {
  @apply grid-auto-flow: column;
  }
}