Search code examples
csscss-gridtailwind-cssjit

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

Based on the documentation, Tailwind JIT (Just In Time) mode allows to add arbitrary styles.

I can't make it work for the CSS grid's grid-template-areas property. In this simple example, I just want the sider on the left, the main content on the right.

Note that I have more complex goals, I know I don't need CSS Grid for such a simple layout.

  • JIT mode works as using an arbitrary padding such as px-[23px] works.
  • The issue lies here: [grid-template-areas:'sider content'], as if you go to the CSS tab there is the same property that works if uncommented.

Here's a playground:

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

  • Because there are two different classes in [grid-template-areas:'sider content']. [grid-template-areas:'sider and content'] because of the space. You must use an underscore to handle the spaces.

    [grid-template-areas:'sider_content']

    Output:

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

    Reference