フロントエンドを開発する際に大抵の場合、UIフレームワークを導入して開発することが多いかと思います。弊社では、BootstrapやBulma、Vuetifyに代表されるようなフレームワークを利用するケースが多かったのですが、今回の開発では、tailwindcssというCSSライブラリを導入してみて今までと景色が変わったと感じたので、せっかくなので紹介したいと思います。

Tailwindcssとは

tailwindcss は数あるCSSフレームワークの1つです。ホームページの最初に「Utility first 」という言葉が書いてあって、初めてみたときは、他のフレームワークのほうがいいなと感じて深く追っていませんでした。tailwindcssでは、p-6, text-greenなどの最小単位のcss classを提供することしか行わず、この最小単位のクラス(=utility class)を組み合わせて、利用者が好きにスタイルして行くという手法です

公式サイトで紹介されているボタンの例

下記に公式サイトで紹介されているボタンの例を記載します。すごくシンプルですが、cssのclassに色々書いてありますね。


<template >
  <div class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot/>
  </div >
</template >

bg-blue-500は、背景色を青の500番にする、text-whiteは、文字を白にするというように非常に細かい粒度のutilty classが提供されています。このようにいっぱいclassを書くのが面倒で敬遠していました。

従来のコンポーネントを提供するフレームワークでは

Bootstrap、Bulmaなどのフレームワークで提供しているコンポーネントをそのまま使うということは、ほぼないので”見た目”をかえるために上書きするCSSを作らないとだめということがよく発生します。ここしばらく、この見た目の挙動をかえるCSSをかなり書いたけど、別のアプリ開発時には、まったく使えないということがよくおこります。

tailwindcssのメリットとデメリット

メリット

利用する際には、一つの挙動を組み合わせて必要なものを作るという形なので、挙動が理解しやすい。クラス名で一目瞭然です。組み合わせて作成するということなので、非常にカスタマイズしやすく、コンポーネントのような形を提供していないので、よくわからない挙動の上書きを行う必要がないとう点です。

デメリット

利用する際には、CSSに関する知識を前提としている点です。サクッとした画面のモックを普段からCSSに触れていない人が触るには辛い気がします。いい意味でCSSしか提供しないので、振る舞いなどは、Javascript or Typescriptなどで作りこむことが必要になります。

cssに不慣れな方もtailwindcssのクラス名からなんとなく振る舞いがわかりCSSに関する理解が上がり、cssを触るのが楽しくなる気がします。

まとめ

tailwindcssは、他のUIフレームワークとは少し違う考えかたにあるということがわかってもらえたでしょうか。利用者にある程度の知識を求めることで、よく使う汎用的な機能を提供するのがtailwindcssです。tailwindcssを使いこなし、オリジナルなコンポーネントを作る楽しみがあると信じたい。