使用 JIT 和任意网格模板区域样式的 Tailwind CSS 网格

Question

根据文档，Tailwind JIT（及时）模式允许添加 arbitrary styles。

我无法使其适用于 CSS 网格的 grid-template-areas 属性。在这个简单的例子中，我只想要左边的sider，右边的主要内容。

请注意，我有更复杂的目标，我知道我不需要 CSS 网格来实现如此简单的布局。

JIT 模式与使用任意填充（例如 px-[23px] 一样有效。
问题出在这里：[grid-template-areas:'sider content']，就好像您转到 CSS 选项卡一样，如果未注释，也会有相同的属性。

<div class="grid [grid-template-areas:'sider content']">
  <sider class="[grid-area:sider]">SIDER</sider>
  <main class="[grid-area:content]">MAIN</main>
</div>

Answer 1

因为[grid-template-areas:'sider content']中有两个不同的类。 [grid-template-areas:'sider 和 content'] 因为 space。您必须使用下划线来处理 spaces.

[grid-template-areas:'sider_content']

输出：

.\[grid-template-areas\:\'sider_content\'\] {
  grid-template-areas: 'sider content';
}

Reference

使用 JIT 和任意网格模板区域样式的 Tailwind CSS 网格

Tailwind CSS grid using JIT and arbitrary grid-template-areas style

css

jit

css-grid

tailwind-css