Web サービスを作ってると、CSS フレームワークの部品ではすぐに足りなくなります。次のようなクリックしてへこむ 3D ボタンが必要になったとしましょう。
最初に考えるのは、すでにあるボタンを拡張する方法です。Bootstrap とか Bulma など、使っている CSS フレームワークのソースコードを調べ、ボタンのスタイルを上書きする CSS を当てます。これは !important だらけの汚いものになりがちです。
部品を自分で作るには?
もうひとつの方法は、イチから自分で作る方法です。ボタン用の新しい CSS クラスを書き、ボタンを 3D にしたり、クリックしたときにへこませたりします。でも CSS で面倒くさいのは、何をするにもまず名前を付けなければいけないところです。ボタンのクラス名を考えて、クラス名.scss ファイルを作り、そしたらコンパイルが走り、微調整のたびにまたコンパイルが走り … どれもちょっとしたストレスです。
残るは HTML の style 属性に直接書いていく方法です。ブラウザをリロードするだけで即座に反映されてプロトタイピングには便利ですが、HTML 内に CSS をベタ書きするので読みにくいし、複雑なことは書けません。
Tailwind CSS
Tailwind CSS は新しい CSS フレームワークのひとつで、HTML の class 属性にスタイルを直接書けます。これがどういうことか、先ほどのボタンを Tailwind CSS で書いてみましょう。
class: に 13 個のクラスが並んでいます。それぞれ Tailwind CSS が提供する小さいスタイル用クラスで、色やフォント、ボーダーなど 3D ボタンに必要なスタイルを指定しています。
- bg-green-400 (背景 = 緑の400番)
- font-bold (ボールドフォント)
- border-b-4 (下ボーダー 4px)
- active:border-b-0 (クリック時の下ボーダー 0px)
- …
HTML の class 属性に書けるので、style 属性ベタ書きくらい手軽です。style ベタ書きよりも優れている点は、クラスを並べるだけでほぼどんな部品でも作れるところです。Tailwind CSS のクラスは、色やフォント、ボーダーをはじめ、flex レイアウト、hover: や active: のモディファイアもサポートしていて、レスポンシブにも対応です。何でも作れて、特にプロトタイピングに重宝します。
クラスを切る
ボタンを共通部品化したくなったら、クラスを切りましょう。ボタンを配置するたびにクラスを 10 個以上並べるのは汚ないし、メンテできないので。Tailwind CSS の @apply を使うと、Tailwind CSS クラスをまとめた新しいボタン用クラスを作れます。
HTML もスッキリ!
このように、Tailwind CSS ではプロトタイプから完成形までの流れがスムーズです。まずはクラスをならべてプロトタイプを作っておいて、必要になった段階でクラスを切ります。これによって、あの面倒くさい最初の名前付けやコンパイル待ちがなくなりますし、最終的にはキレイな CSS クラスができあがります。
複雑な部品も OK
Tailwind CSS の flex レイアウト系クラスを使えば、複雑な UI もきちんと作れます。これは英語多読多聴サービス Lingomine の辞書 UI で、単語をクリックすると意味や重要度などをポップアップします。
この辞書 UI は、Tailwind CSS で作ったボタン、トグル、アイコンなどの部品を同じく Tailwind CSS の flex 系クラスでレイアウトしたものです。Lingomine ではすべての画面を Tailwind CSS で作っています。
ちなみに部品の構成や分類は Atomic Design に沿っています。Atomic Design の実践的な手法については、別の機会に詳しく書きます。
まとめ
Tailwind CSS を使えば、プロトタイピングから完成形まで、ぱぱっと UI を作れます。私が作っている英語多読多聴サービス Lingomine では今まで Bulma を使っていましたが、Tailwind CSS に切り替えてからというもの、作業スピードが明らかに速くなり UI も改善できました。今おすすめの CSS フレームワークです!
