Tailwind grid-template-areas

[LudvigAlmvaang]

Hello :)

I am trying to use grid-template-areas in order to populate the four columns at the top with a header.
Tailwind doesn't include a utility for this so I am using brackets to write some css code, but somehow it is not working as intended.
When I inspect the div container in my web browser I can not even see the grid-template-areas property, but I can see the grid-area-header property for the h2 container.

Relevant code snippet:

<div className="grid lg:grid-cols-4 min-h-[500px] text-black justify-items-center items-center lg:[grid-template-areas:'header header header header']">
   <h2 className="font-markazi text-5xl lg:[grid-area:header]">Header</h2>
   <p>Testimonial Section 1</p>
   <p>Testimonial Section 2</p>
   <p>Testimonial Section 3</p>
   <p>Testimonial Section 4</p>
</div>

Output:

[LudvigAlmvaang]

I kind of solved it by using traditional css.

snippet from index.css
.grid-cols-4-header { grid-template-areas:'header header header header' }

snippet from testimonials.tsx
<div className="grid lg:grid-cols-4 min-h-[500px] text-black justify-items-center items-center grid-cols-4-header">

But still, I would like to know why it didn't work the way I did it first.