無料
ご
相
談
・
お
見
積
も
り
2024.10.10
今回はTailwind編で最近流行っているTailwind CSSについて僕の感想を述べていこうと思います。
流行ってるから、楽そうだからで導入しだして3年ぐらい立つので改めてTailwind CSSについて考えてみました。
使っている最中は何が良いのかを忘れてしまっていて、別に生のCSSでもCSS in JSでもいいんじゃない？と思っていました。
しかし、実際にemotionや生のCSSを使うプロジェクトに入った時に痛感することとなりました。
まずは、EmotionとCSSを使っている際に痛みを感じたのは下記です。
上記を具体的に一つずつ説明していきます。
これはわかりやすくて、下記のようにTailwindであればhtmlを見ればすぐにどんなスタイルが反映されているのかがわかります。
<div className="w-full px-4 mx-2 flex justify-center items-center">
{children}
</div>わざわざファイル分割せずともクラス名を見に行かなくてもいいですよね。
加えて、Tailwindのクラス名は直感的でCSSを書いた人であれば何となく理解できるのではないでしょうか？
これも僕の好きな導入ハードルの低さです。
次に補完が効かないところです。(もしかしたら聞くかも。)
emotionで書いていた際に出なかったので全て記載しなければならなかったのが少し重かった記憶です。
仮に補完が効いたとしても、flexボックスであれば
displぐらいまで打ってようやく出てきますよね。
Tailwindであればflexで終わり且つflぐらいで補完が効いてくれます。(でも確かTailwind inteligenceみたいなプラグイン入れないとダメかも。)
次は命名です。
命名自体は自分は好きでどの開発者が見ても即座に理解できるという側面で関数・変数で大事にしたいです。
でも「htmlとcssのコードが遠いので上下で往復しなければならない。」で挙げた通り上下したりするのが思いのほかコストが大きくなるので、CSSに関してはTailwindに軍配が上がります。
さらに、Tailwindは何といっても直感的にクラス名を見るだけで何をしているのかを教えるので、命名の役割を担ってくれています。
w-full mx-auto px-4 mt-8 md:px-0 md:w-9/12 md:max-w-6xlわかりやすくないですか？
w-fullでwidth: 100%か！
mx-autoはmargin: 0 auto;か！
md:px-0はパソコンサイズぐらいになるとpadding-rightとleftを0pxにしてくれるのか。
これを2ヶ月ぐらいするとTailwind宗教への入門は完了です。
プロパティーは短い方がいいです。
処理も関数名も短くてシンプルがいいです。
display: flex;
justify-content: center;
align-items: center;こんなことはもう二度としたくありません。
flex justify-center items-centerと書きたいのです。
一時期Emotionを使ってた時に下記のようなコードで条件分岐していました。
const blogWrapper = (c) => ({
backgroundColor: isHidden ? "#ffffff" : "white"
})このいちいちisHiddenを受け渡すのがめんどくさかったです。
<div className={`bg-${isHidden ? gray-200 : white }`}>{children}</div>こんな感じで良かったと思います。
ちょっと条件分岐が絡むとTailwindの方は可読性落ちるのであまり良くないかもですね。
とはいえインラインで書けるので許容範囲かなと思います。
これもTailwindに戻りたくなった理由でよく管理されていないプロジェクトだったりするとクラス名のhtmlだけ消してCSS自体を消さずにゴミコードが貯まるようになっていました。
恐らく、今後そのコードが他で使用される可能性があったりする理由かと思いますが、溜まってくるとコードの下に新しいCSSを追加しなければならないので、息が切れます。
一方、Tailwindはhtmlを消せば必然的にCSSも消えるので保守性が担保できますね。
とはいえ、何でもかんでもTailwindを導入すれば良いかというとそうではなく、一定のリスクが存在します。
Tailwindの次に何か新しいCSSが存在したとしましょう。
その時にどのように互換性を保つのでしょうか？
何かいい感じにクラス名をつけてExportしてくれのでしょうか？
してくれません。
自分で何とかしないといけないです。
途中でTailwindからCSSやSassに変えようとするとかなりの移行コストがかかります。
CSSができるエンジニアが入ってきたとしましょう。
Tailwindに慣れるまで2ヶ月ぐらいかかります。
慣れるというのはサクサク書けるような状態です。
少なからず勉強コストとビジネスにネガティブインパクトがかかってしまうので理解しておくべきでしょう。
Tailwind CSSの良いところと悪いところを記憶を辿りに書き殴っていきました。
まとめるとみんな使って欲しいです。
僕の中では、CSSを書けるのであれば導入は余裕です。
CSSができるならできます。
あと、僕が入ったここ1年のプロジェクトでTailwind CSSが使われてなかったので願いを込めても使って欲しいです。
