【CSS】tailwindで改行する時はwhitespace-nowrap(スペル注意!)
お菓子をくれなきゃforcepushしちゃうぞ!Mizutani(@sirycity)です。してはいけない(戒め)
今日はそんなに致命傷ではないですが、tailwindのちょっとした罠です。
結論
tailwindで改行させたくない時はwhitespace-nowrap
を使おう!
はじめに
改行したくない時ってありますよね?そんな時はCSSでこう。
whitespace: nowrap;
はい。こんだけです。そしてこれをtailwindで表現するにはこう。
<div class='whitespace-nowrap'>
以上です。...ここまでは特に問題ないように見えます。ところが
名前が微妙に変わった
このwhitespace-nowrap
、なんと名前がバージョンによって違います。それだけならまだ分かりますが、全然違う名前とかではなく微妙に変わってます。
具体的にはv1とv2以降で変わってます。まずは最新のものがこれ。
はい、whitespace-nowrap
でしたね。
次にv1のがこれ。
はい、whitespace-no-wrap
です。
どうしてこうなった
こちらのツイートに答えがあります。スペル変えるか?ってアンケートに対して賛成6割のため変わったみたいです。ツイート主はtailwindのメンテナのようですね。
tailwindは破壊的変更をかなり行う方針ということもあり、そこそこ僅差でも変えるに至ったんでしょうか?とはいえ票数はかなりあるし有意な差であると言えそうです(統計学素人並の感想)(有意って言いたいだけ)
愚痴
以後完全に愚痴ですが、tailwind古参からすると(謎アピール)かなりの頻度で間違えるのでちょっといやです。
...というか、ハイフンの有無って日本人からするとそんなに気にならないと思うんですね。例えば英文は単語の途中に改行でぶつ切りになった時にハイフンで繋げることがあるんですが、これだって国内で使ってる例を見たことがないです。元ツイも日本人コミュニティで広まってる感じは全然しなかったです。あとwhitespaceって視覚的に変化が分かりにくいので、typoしても気付くのが遅れます。僕は気付かないまま4ヶ月リリースしっぱなしでした。それに昨日気付いたからこの記事作った
さいごに
tailwindは今や世界レベルのCSSフレームワークです。上手く使いこなしましょう。破壊的変更が多いのは裏を返せば便利機能がたくさん使えるってことです。楽しみましょう!以上。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介