🧊

Tailwind CSSで、`grid-template-areas`を使いたい

だいぶ気持ち悪いけど、できることはできるらしい。

このように

<!--
  foo bar
  foo baz
  boo baz
/ 1fr 400px
-->
<div
  class="
    grid 
    gap-16
    [grid-template-areas:'foo_bar''foo_baz''boo_baz']
    grid-cols-[1fr_400px]
  "
>

[]でまるごと囲み、'ごとに、エリア名を_でつなぐ。

あとはそれぞれでgrid-areaを指定する。

<div class="[grid-area:foo]">foo</div>

困ったら[]

CSS Variablesも参照できる。

<!-- max-width: var(--pc_max_width) -->
<section
  class="max-w-[--pc_max_width]"
>

CSS書きたいな〜。