Tailwind CSSを1度試してみての感想（備忘録）
今回、SNS等で何かと話題になっているTailwind CSSについて、1度試してみたので感想を書いていく。
Tailwind CSSとは
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
公式から引用すると↑のような感じだ。ざっくり訳すと、実用性の高いCSSのフレームワークだと考えてよさそうだ。
実際のコーディングに入るときの対応について、かなりざっくり説明すると、これまではHTMLやCSSの各データを行き来してコーディングしていたのが、HTML側のコーディングだけでCSSの情報も掲載していけるようになる（※例外もあり）。
ようは、HTMLにstyleを使って直書きをしているイメージに近いと考えていただくとよいだろうか。実際にはstyleは当て込まないが、そんなイメージだ。
詳しくは後述するが、なんとHTML側だけで疑似要素（before、afterなど）や疑似クラス（hoverなど）をclassに当て込むことができるのだ。また、ブレークポイントも指定ができるので、かなり考えられているなと感じた。
環境構築について
環境構築の話は、他のページ等でも多々紹介されているので言及しない。順を追って対応していけばそこまで苦労しないと思う。
ただ、ターミナルやGit Bashなどの使い方、Node.jsやnpmに関する知識がある程度ないと導入は難しいのではないかと感じた。
その内、時間が経つにつれ、環境構築をしなくても導入できる話をSNSで見かけることがあるので、初学者にも気軽に使えるようになるのではないかと考えている。
使ってみての感想
コードの名前に慣れるまでが大変
例えば、HTML 側にclass名を入れる場合、
- widthが100% →w-full
- max-widthが100% →max-w-full
- font-sizeが1rem →text-base
- line-heightが1.5 →leading-normal
- colorが白 →text-white
などと、実にさまざまな名前が決まっている。
慣れてくると、ある程度規則性が見えてきて使いやすくなってくるのだが、それまでかなり大変だった。
ただ、vs codeの拡張機能で予測変換でこれらの名前を表示してくれるものがあったりするし、コード一覧表もSNS等で紹介されているので、これからそういったものがどんどん出てくるのではないかと思っている。
詳細度の指定ができない？（これは未解決のため参考程度にとどめてほしい）
詳細度の指定については、正直なところ解決方法があまりわかっていないが記載していく。参考程度にとどめてほしい。
例えば下記のように、フォントサイズを親要素に対して24px、子要素に対して18pxと指定したとき、親要素が優先されるため、子要素に対しては24pxと指定される。
<h2 class="text-[24px]">タイトル<br><span class="text-[18px]">title</span></h2>本来であれば、CSS側で詳細度をあげることで、柔軟に指定ができるのだが、この点が不便だと感じた。
無理矢理対応するとすれば下記のようになる。
<h2><span class="text-[24px]">タイトル</span><br><span class="text-[18px]">title</span></h2>これでもいいのだが、個人的にはspanの数が増えるのが好きではない。また、文章中に文字の大きさやフォントが変わる箇所が多ければ多いほど煩雑化して読みにくいコードになってしまう懸念もある。
これに対しての解決方法が、コンパイルされる時のCSS全てに!importantをつける方法だ。そのための設定が下記の方法である。
//tailwind.config.jsに対して対応
module.exports = {
important: true,
}上記の記述を対応すると解決されるのだが、個人的には!importantは使いたくないので納得がいっていない。
これについては今後に期待しておきたいところだ。
HTMLが超絶読みにくくなる
指定するCSSが多くなればなるほど、それだけコードに入れる量が増えてしまうため、HTML自体が読みにくくなった。
自分がどこまで対応していたのか分からなくなることが多かったし、他の人がページを触ったときに解読するのにかなり苦労するのではないかと感じた。
ある程度ルールを決めて対応するのがいいのではないかと思う。といっても、コードの記載する順番を決めることくらいしか思いつかないが。
保守や運用をするページでは扱いにくそう
作って終わりのページであれば、ページを改修するようなこともないのでTailwind CSSに向いていそうだが、そうではない保守や運用が伴うページでは、なかなか導入するのはハードルが高いのではないかと感じた。
例えば、既に本番反映したページに対して、何かしらコンテンツを追加したり、デザインの改修が入ったりしたときに、そのページを作った本人でないと対応が難しくなるのではないかと感じた。
また、別の担当者が対応する場合、コードの解読に時間を取られるのではないかと思ったし、先方に運用・保守を任せていく場合でも、HTMLソースのclassにルールがあるので、その資料を準備することなどに時間を取られそうな気がした。
チームで運用していく場合でも、全員がTailwind CSSのことを理解していないと引き継いで対応することができないので、なかなかハードルが高いのではないかと感じた。
JavaScriptでclassを付与するなどの対応はHTML側だけではできなさそう？（これは未解決のため参考程度にとどめてほしい）
例えば、ある要素をクリックしたときに、aciveというクラスが付与されるとき、これをHTML側でTailwind CSSを用いて対応することがどうやらできなさそうだ。
対応方法を調べてみたが出てこなかった。仕方なくCSSに直接記述する対応にした。
今後解決方法が見つかったら、本記事を更新したいと思う。
とにかく軽量なのがTailwind CSSのいいところ
buildしたときに、使っていないTailwind CSSのプロパティが全て削除されるようになっているので、かなりファイルサイズを軽量化できる。
ただ、buildについては、JavaScriptも一緒にbuildしたかったのだが、対応方法が分からずといった感じ。これは自身の勉強不足なので、対応方法が見つかったら本記事を更新かけたいと思う。
Just-in-Time Modeがかなり便利！（IE11は対象外）
ピクセルなどの単位指定、16進数のカラーなどの指定が直感的にできるようになるので、かなり便利だ。
例えば、下記のような感じでclassの指定ができる。
- font-sizeが24px →text-[24px]
- colorが白 →text-[#fff]
- widthが600px →w-[600px]
- topが10px →top-[10px]
こんな感じで直感的に指定ができるようになるので、慣れてきてからは結構速くページを組んでいけるようになった。
何より、CSSのファイルに行ったり来たりしないのがいい。
以上で終わりだ。
今後Tailwind CSSを使っていくかは未定だが、もう少し様子をみてから考えたいと思った。
