お菓子をくれなきゃforcepushしちゃうぞ！Mizutani(@sirycity)です。してはいけない(戒め)

今日はそんなに致命傷ではないですが、tailwindのちょっとした罠です。

結論

tailwindで改行させたくない時はwhitespace-nowrapを使おう！

はじめに

改行したくない時ってありますよね？そんな時はCSSでこう。

whitespace: nowrap;

はい。こんだけです。そしてこれをtailwindで表現するにはこう。

<div class='whitespace-nowrap'>

以上です。...ここまでは特に問題ないように見えます。ところが

名前が微妙に変わった

このwhitespace-nowrap、なんと名前がバージョンによって違います。それだけならまだ分かりますが、全然違う名前とかではなく微妙に変わってます。

具体的にはv1とv2以降で変わってます。まずは最新のものがこれ。

Whitespace - Tailwind CSS

はい、whitespace-nowrapでしたね。

次にv1のがこれ。

Whitespace - Tailwind CSS

はい、whitespace-no-wrapです。

どうしてこうなった

こちらのツイートに答えがあります。スペル変えるか？ってアンケートに対して賛成6割のため変わったみたいです。ツイート主はtailwindのメンテナのようですね。

tailwindは破壊的変更をかなり行う方針ということもあり、そこそこ僅差でも変えるに至ったんでしょうか？とはいえ票数はかなりあるし有意な差であると言えそうです(統計学素人並の感想)(有意って言いたいだけ)

愚痴

以後完全に愚痴ですが、tailwind古参からすると(謎アピール)かなりの頻度で間違えるのでちょっといやです。

...というか、ハイフンの有無って日本人からするとそんなに気にならないと思うんですね。例えば英文は単語の途中に改行でぶつ切りになった時にハイフンで繋げることがあるんですが、これだって国内で使ってる例を見たことがないです。元ツイも日本人コミュニティで広まってる感じは全然しなかったです。あとwhitespaceって視覚的に変化が分かりにくいので、typoしても気付くのが遅れます。僕は気付かないまま4ヶ月リリースしっぱなしでした。それに昨日気付いたからこの記事作った

さいごに

tailwindは今や世界レベルのCSSフレームワークです。上手く使いこなしましょう。破壊的変更が多いのは裏を返せば便利機能がたくさん使えるってことです。楽しみましょう！以上。