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 >
<sider >SIDER</sider>
<main >MAIN</main>
</div>
CodePudding user response：
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';
}