慣れてくるとなかなか良い開発体験が得られている気がします。
以前しずかなインターネット内で簡単に記事としても上げていましたが、去年の11月頃から自分の実装環境にMasterCSSなど、いくつかのユーティリティファーストなCSSフレームワークの導入を検討していました。
その時100%ハマるものが見つからず、とりあえずTailwind CSSなら自分の環境に組み込んでも問題なさそうなレベルで調整できたので試験的な運用も兼ねてしばらく使ってみています。
(初期に調整・検討した内容は以下の記事にある程度まとめています)
Tailwindとの出会い
下請けのコーディング環境で導入されているケースが度々あって数年前から年に1〜数回程度の少ない頻度で多少触ってはいたので、完全にゼロからの導入よりは自身でもハードルが少し低かった気がします。
class名が覚えられない問題は?
補助ツールを使いつつ多少慣れてくるとそこまで気にならなくなりました。
ある程度はCSSのプロパティ名に近いclass名ですが、tracking-xxx(letter-spacing)、leading-xxx(line-height)などいわゆるTailwind語も結構多くて、慣れないうちはメモ帳に主要なclassを書き出したり書くストレスが結構ありましたが、以下のツールでかなり解消されました(class名に慣れてくるとツールの補助も相まって良い速度でコーディング進行ができている気がします)
VS Codeの拡張機能 : Tailwind CSS IntelliSense
VS Code上でclass名のオートコンプリートなど便利な機能が追加されるもので、数文字打ち込めばうろ覚えでもTailwind語のclass名が出てくるのでかなり時短になっている気がします。
tailwind.config.js 内で addUtilities()、addComponents() を使って自作したclass名まで補完してくれるのも非常に有り難いです。
Chromeの拡張機能 : Tailwind Cheat Sheet Extension
Tailwind語のチートシートです。ブラウザ上にアイコンが追加されてそこから検索もできるので、Tailwindのclass名 or CSS プロパティ名を入力すると該当する内容を絞り込むことができるので非常に重宝します。
以下は letter-spacing のclass名を検索しているスクショですが、検索結果は100%入力せずとも出てくれるのでかなりスムーズに絞り込めます。
各内容はclass名、プロパティ値はクリックするとそのままコピーできたり、DOCは公式ドキュメントの各プロパティ( https://tailwindcss.com/docs/letter-spacing )へリンクしているので、tailwind.config.jsで値をカスタマイズしたい時の詳細確認などでも非常に重宝しました。
このCSSのプロパティ値コピーが地味に便利で、Google検索でプロパティの詳細を調べたい時や、SNSなどでプロパティ値を書きたい時など、Tailwindと関係ない時も時々利用しているので、色々なケースでかなり恩恵を受けている気がします。
Prettier : prettier-plugin-tailwindcss
Prettierを利用している時にHTML上のclass名の並び替えをしてくれる拡張機能で、順番を気にせずclass名を適当に書けるのでかなり時短に繋がっている気がします。
※class名の並び替えは eslint-plugin-tailwindcss にも備わっているようですので、環境に合わせて導入するものは変えた方が良さそうです。
CSSプロパティ値の拡張性は?
tailwind.config.js に諸々書くことでかなり詳細に拡張できたので、自分に合う設定さえ書くことができれば使い心地はかなり良いです。
デフォルト値を見てみる
フレームワークなのでTailwind語の各classにはデフォルトで値が割り振られていますが、特に余白やサイズに関係するものなどは案件によって全く異なるため、これをそのまま使えるようなケースは自分の環境ではまずありえないです(拡張するのが面倒でこの辺で導入を見送った人も多いかもしれませんね。)
例えば上余白 margin-top(mt-数字)の以下のように2px刻みでclassが用意されています。
mt-0:0rem
mt-px:1px
mt-0.5:0.125rem(2px)
mt-1:0.25rem(4px)
m-1.5:0.375rem(6px)
mt-2:0.5rem(8px)
m-2.5:0.625rem(10px)
mt-3:0.75rem;(12px)
〜以下省略〜
Margin設定の詳細: https://tailwindcss.com/docs/margin
デフォルトでも2px刻みで用意されているのである程度は対応できそうですが、
mt-「数値」の部分に設定する数値と実際に設定される値がずれている
(mt-1が1pxではなく4px相当の値になっているので少々分かりづらい)
奇数値が設定できない
(可能な限りデザインを再現したい場合などでは奇数値もよく利用するので)
といった具合で何も拡張しないと結構使いづらい設定が多い印象です…。
余白を拡張してみた所感
色々変更・増設ができて結構便利です。
技術記事ではない&自分の中でも検証中な部分が多いので、具体的な実装コード掲載は省きますが、複数の単位設定を混雑させる(mt-13(13px)、mt-12.34per(12.34%)、mt-20ptr(1.25rem(20pxをremに変換))などかなり自由に拡張できました。
※標準の機能で特殊な値は「[]」を用いてmt-[12.34%]など、class名に直接値を埋め込むことで実現ができるのですが、全部これでやってしまうと吐き出されるcssの文字量がやや多くなってしまうので、cssをちょっとスリム化する目的で現在は色々試している途中です。
Tailwind CSSの今後
3/7に公式からアップされた以下のニュースによるとv4では高速化など色々と最適化されるようですが、それに伴って構築方法なども大きく変わりそうです。どう変わっていくのか動向が楽しみですね。
Open-sourcing our progress on Tailwind CSS v4.0
おわりに
少々クセはあることは否定できませんが、メジャーで認知度も高いため他社が関わる案件などでも利用しやすいというメリットもあり、ここ数ヶ月でこれはかなり大きいかもと感じています(Tailwind入れてますとだけ言えばある程度分かってくれるので連絡が楽でした。)
ただ、MasterCSSの方がHTMLの見通しが良いとは思うので、開発が進んで利用できるようになれば改めてそちらも試してみたいと思ってはいますが、とりあえず今は引き続きこのままTailwind CSSをメインで利用しつつ良い設定を探っていきたいと思います。
関連記事 : ViteでMasterCSS(2系ベータ版)を試してみた