Tailwind CSS 网格使用 JIT 和任意 grid-template-areas 样式

Question

根据文档，Tailwind JIT（Just In Time）模式允许添加任意样式。

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

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

• JIT 模式的工作原理是使用任意填充，例如px-[23px]Works。
• 问题就在这里：[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']因为空间。您必须使用下划线来处理空格。

[grid-template-areas:'sider_content']

输出：

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

参考