Tailwind CSSにおける、`[]`内での`_`と` `の扱い

端的に言うと、Tailwind CSSなプロジェクトで、次のような記述がしたかった。

.overlay {
    position: fixed;
    bottom: calc(var(--footer_height) + 8px);
}

やっぱりCSS Variablesは使いたくなる。

TL;DR

こう書く。

<div class="fixed bottom-[calc(var(--footer\_height)_+_8px)]"></div>

なんだこれ・・・🥹

スペースとアンダースコアは特別

というのも、Tailwindは_を に変換するようになってるらしい。

https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace

そういうわけなので、

• : _を書くと変換される
• _: \_と書いてエスケープする

とする必要がある。

もしくは、割り切ってスペースを潰して書くか。

<div class="fixed bottom-[calc(var(--footer\_height)+8px)]"></div>