tailwind.cssでハマった罠

tailwind.cssの罠

先日、tailwind.cssで謎（？）のバグに遭遇し、2週間くらい解決してなかったのが、つい先程解決したので、記述する。

症状

javascriptで、"py-32"クラスを追加したもの、"py-32"が効かない。

原因

HTMLに"py-32"が書かれていなかったので、対象となるクラスがバンドルされなかった。

対処

ダミーで適当なHTMLに適用させたいクラスを記述する。その後、必要があればjavascriptで削除する。

感想

この罠のやばい所は、開発環境では再現しないという事。 ビルド後に発生するバグってホント、デバッグしにくいですよね。 本番環境でバンドルされているCSSを分析してようやく原因に気がついた。 冷静に考えてみると、このバンドルする際の設定は全部お任せにしているとこういう罠にハマるんだなぁと。 自前でバンドル設定を書くのが死ぬほど面倒なので、エコシステムに依存した環境構築をしたのは良いとして、こんな面倒くさいことにハマるのはなんかやだなぁ。 エコシステムは楽な分、別の場所でハマる事があるので、あんま好きじゃない。