Best alternative to "grid-template-areas" in tailwind

[udit99]

Hey there
Im trying to achieve this layout using tailwind. Specifically I'm looking to model this layout:

  .wrapper {
    text-align: initial;
    grid-template-areas:
     "hero-image title"
     "hero-image subheading"
     "hero-image details-list"
     "hero-image cta";
  }

I haven't been able to figure out how to use col-span-x to get the same effect (Div spanning a column that cuts through multiple rows)

[horuskol]

Hi,

I put together a plugin that creates utility classes when you configure grid-template-areas:

https://www.npmjs.com/package/@savvywombat/tailwindcss-grid-areas

[donhector]

Maybe this will help? https://stackoverflow.com/questions/67242334/tailwind-css-how-to-make-a-grid-with-two-columns-where-the-1st-column-has-20

[mendrik]

I use styled components for defining the areas and className="[grid-area:header]" etc for the items

[jd-solanki]

Now you can do this: [grid-template-areas:'header_header_header''main_main_aside''footer_footer_footer']

[wongjn]

Yes, this is an example of an arbitrary property class. See documentation on the website.

[futile]

Ah, thank you, perfect! :)

[jack3898]

Does anyone know why this doesn't seem to work with other values? When I try leftpanel as an area name, tailwind falls over and no longer generates the style?

[wongjn]

Seems to work in this Tailwind Play (open the Generated CSS panel). Does your class work in Tailwind Play?

[jack3898]

Ah, I classic blunder. I was doing this:

Of course it's string interpolation. Tailwind 101. 🤦‍♂️
Mixed with some class names persisting from when I didn't do that, explains why it seemed like some grid area names were working while others were not.
My bad! Thanks for the super quick reply @wongjn! Appreciated! 🙌