2023/05/26

【CSS】Tailwindの長所と短所(なるべく他の人と被らない内容で)

こんにちは！起業してからはTailwind一択のMizutani(@sirycity)です。もはや税理士さんと同じ立ち位置。

今日はそんなTailwindを3年ちょい使って感じた長所と短所を書きたい…んだけどそういった記事はめっちゃあるのでなるべく他の人が書いてない内容を書きたいと思います。

長所

目が楽

これ以外と大事だと思います。ドライアイ歓喜。

目を使うという観点だとTailwindは該当のHTMLタグのclassを見れば終わりですがその他のアプローチはHTMLタグのclassを見てからCSSファイルにあるその内容を見なきゃ駄目です(SFCみたいな例外も全然あるけど)

具体的なアクションは

1. HTMLタグを見つけて
2. その中のclass属性を見つけて
3. その中のclass名を見つけて
4. そのclass名からcssプロパティを判断する

みたいな感じです。4.は丸暗記する必要がありこの部分が学習コストですが他は簡単です。一方、従来型のアプローチでは

1. HTMLタグを見つけて
2. その中のclass属性を見つけて
3. その中のclass名を見つけて
4. カーソルを見ながらそのclass名にカーソルを当てて
5. 出てくるポップアップを見て
6. その中から該当のclass名を見つけて
7. その中から該当のCSS属性を見つけて
8. 元のHTMLファイルに視線を戻す

とまあ、明らかにアクションが多いです。カーソル合わせるとCSSのポップアップを出してくれないような太古の開発環境ならもっとかかります。

視線移動も楽

tailwindの批判の1つとしてclass名が長いってのがあります。それは確かにそうです。長いよね…

ただ長いっつってもぜんぶclassに書かれているので見るのは1行です(べつに改行もできるけど)。視線の移動は一直線。一方cssの場合は主に縦移動+多少の横の動きで、sassみたいなネストがある場合は視線移動は二次元になります。さらに場合によっては前述したファイルの移動も。

プログラミングの文法を覚えなくていい

tailwindの学習コストは単語を覚えることのみです。だって書くときはclassに書くだけだしね。その他の大半のアプローチではプログラミングの文法を覚える必要があります。とくにCSS in JS系。マークアップエンジニアかフロントエンドエンジニアならともかく、WebデザイナーやUI/UXデザイナーが実装する場合にハードルが高いんじゃないかな？と思います。

覚え方もシンプル

さらにtailwindは(基本的には)cssのプロパティとtailwindの命名が1対1で対応しているので覚え方が楽です。bootstrapみたいな1対多で対応しているものより格段に覚えやすいです。

知名度

身も蓋もないですね。単純に既に使える状態の人が多いです。

短所

信者としては短所なんて書きたくないんですがそれはなんかフェアじゃないので書きます。ちなみに2年前の記事と内容が若干かぶる。

破壊的変更が多い

けっこう変わります。公式が移行の仕方しっかり説明してくれるんで良いっちゃ良いんですが、まあ変わります。v2でオレンジ色が消えた時は発狂しそうになりました。v3で復活したけどね。

気づきにくい変更が多い

これは半年前の記事でも書いたしこの後にもちょっと触れるんですがそんなの気づくかって変更がたまにある。whitespace-no-wrapがwhitespace-nowrapになったり、過去には色が微妙に変わったこともありました。同じようにtext-gray-900みたいに指定しててもバージョンによって微妙ーに色変わるんです。ほんっとに微妙に。

類推しにくい命名がある

とくにややこしいのがこのへん。

line-height: leading-
letter-spacing: tracking-
text-indent: indent-
text-align: text-
vertical-align: align-
align-items: items-
justify-items: justify-items-
justify-content: justify-