Tailwind CSS

Tailwind CSSとは、ユーティリティファーストのCSSライブラリです。

Bootstrapとは異なり、.btnや.cardなどのコンポーネント系のクラスは定義されていません。
代わりに、1つのスタイルのみを変更するユーティリティ系のクラスが多く用意されています。

Tailwind CSSを使うと、基本的にHTMLファイルを編集するだけでほぼ全てのスタイルを当てることができるくらいユーティリティ系のクラスが豊富です。例えば下記のように書けます。

 <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded select-none">
   Button
 </button>

しかし、このようにクラスをやたらとつける方法は取らず、基本はcssでスタイルを当てていきます。

では、どのような時にTailwind CSSを使用するのでしょうか。
この記事では、Tailwind CSSを導入した理由とメリットをまとめます。

 <div class="c-main-wrap">
   <h3 class="c-main-title">タイトル</h3>
   <p class="c-main-text">テキスト</p>
 </div>

 .c-main-wrap{
   display: flex;
   align-items: center;
 }

例えば上記のようなコードは、Tailwind CSSを使えば下記のように書けます。

 <div class="flex items-center">
   <h3 class="c-main-title">タイトル</h3>
   <p class="c-main-text">テキスト</p>
 </div> 

上記のc-main-wrapのように、クラスをつけてスタイルを当てたが、スタイルシートに1,2行しか書かないなどの場合にTailwind CSSのクラスをユーティリティ的に使用します。flexboxはよく使います。

このメリットを書きに記します。

1.クラス名を考える手間が省ける
通常のコーディングでは、HTML構造を設計し、クラス名を考えて当てていきます。
ただ、このクラス名を考えるのに悩まされるてしまうことは度々あります。

TailwindCssを使えば、クラス名を考える時間と、クラス名をCSSファイルに記述する時間を省けます。

2.プロパティ変更によるミスを減らせる
通常のCSSでコーディングしている場合、複数のHTML要素に指定されたクラスのプロパティを変更した時に、意図しない場所で表示崩れを起こす可能性があります。

例えば、.c-main-wrapが他の場所で使われていたとし、それを忘れていた上で下記のように変更すると他の場所で意図しない表示となります。また、align-items一つの変更に別のクラスを作成しなくてはいけないのが少々手間に感じます。

  .c-main-wrap{
    display: flex;
    align-items: flex-end;
  }

一方、Tailwind CSSはインラインで記述する性質上、このようなミスが起こりにくくなっています。

長くなりましたが、導入の理由として、flexboxなどの1つのスタイルをユーティリティ的に使えるという俊敏性と即効性が大きいです。コンポーネント系のクラスが多く用意されているBootstrapではこのような使い方はできないですね。