CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」

Post on:2019年11月28日

はじめに

私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています。常に、自分のニーズにあったスケーラブルなフレームワークを理解するために勉強しています。

Tailwind CSSの使用例

数ヵ月前に同僚と話していた時に、Tailwind CSSという名前のCSSフレームワークが話題になりました。普段はほとんどのプロジェクトでBootstrapを使用していましたが、Tailwind CSSを使い始めてみると、今までのやり方が劇的に変わりました。

Tailwind CSSとは

Tailwind CSSには、公式サイトがあります。

Tailwind CSS
Tailwind CSS -GitHub

訳者注: Tailwind CSSは、当ブログでも紹介しました。

便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS

公式サイトによると、下記のように記載されています。

Tailwind CSSは高度にカスタマイズ可能なローレベルのCSSフレームワークです。上書きで苦労しなければならない面倒なスタイルは一切なく、カスタマイズされたデザインを構築するために必要なすべてのビルディングブロックを提供します。

実際のところ、多くのCSSフレームワークにはあらかじめデザインされたコンポーネントが多すぎるため、自分用にカスタマイズされたUIを使用する場合には、それらのスタイルを何度も上書きする必要があります。

Tailwind CSSにはあらかじめデザインされたコンポーネントの代わりに、HTMLはそのままでカスタマイズされたUIを構築できるユーティリティのクラスが用意されています。

私がTailwind CSSを実際に使い始めてから、CSSの記述方法がどのように変化したか、いくつかの例を紹介します。

カードコンポーネントで実装の比較

通常のCSSとTailwind CSSを使用して、カードコンポーネントの実装を比較します。

カードコンポーネント

Tailwind CSSを使用すると、CSSを1行も書かずに実装できます。素晴らしいことです。信じられませんか？実際のコードを見てましょう。

通常のCSSを使用したカードコンポーネント

まずは通常通り、HTMLとCSSを記述して実装します。

<div class="card">
  <img class="card__img" src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="" />
  <div class="card__body">
    <h1 class="card__title">Title card</h1>
    <p class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    <span class="card__tag">#tag1</span>
    <span class="card__tag">#tag2</span>
    <span class="card__tag">#tag3</span>
  </div>
</div>

<h1 class="card__title">Title card</h1>

<p class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>

</div>

CSSは、29行も記述しました。

.card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  max-width: 24rem;
  &__img {
    width: 100%;
  }
  &__body {
    padding: 1rem 1.5rem;
    background-color: #fff;
  }
  &__title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
  }
  &__description {
    color: #4a5568;
    margin-bottom: 4rem;
  }
  &__tag {
    color: #4a5568;
    padding: 0.25rem 0.75rem;
    margin-right: 0.5rem;
    font-weight: 600;
    display: inline-block;
    border-radius: 9999px;
    background-color: #edf2f7;
  }
}

.card {

box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

max-width: 24rem;

&__img {

width: 100%;

}

&__body {

padding: 1rem 1.5rem;

background-color: #fff;

}

&__title {

font-size: 1.25rem;

margin-bottom: 0.5rem;

font-weight: 700;

}

&__description {

color: #4a5568;

margin-bottom: 4rem;

}

&__tag {

color: #4a5568;

padding: 0.25rem 0.75rem;

margin-right: 0.5rem;

font-weight: 600;

display: inline-block;

border-radius: 9999px;

background-color: #edf2f7;

}

Tailwind CSSを使用したカードコンポーネント

Tailwind CSSを使用すると、用意されたユーティリティのクラスだけで実装できます。CSSを記述する必要はありません。

<div class="max-w-sm shadow">
  <img class="w-full" src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="" />
  <div class="bg-white px-6 py-4">
    <h1 class="font-bold text-xl mb-2">Title card</h1>
    <p class="text-gray-700 mb-16">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag2</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#tag3</span>
  </div>
</div>

<h1 class="font-bold text-xl mb-2">Title card</h1>

<p class="text-gray-700 mb-16">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>

</div>

何か気づいたことはありますか?

実装されたカードコンポーネントは同じですが、Tailwind CSSの場合はCSSを記述する必要がありません。通常のCSSの場合はこういった単純なコンポーネントの実装だけでも29行も必要になり、大規模プロジェクトになるとどれだけの時間とコードが増えるかを考えてみてください。

注意点はありますか？

HTMLにclassを記述するのが増えますが、労力ははるかに少なくなります。

BootstrapとTailwind CSSの比較

Bootstrapを使用しているのであれば、CSSフレームワークを変更して、ユーティリティのクラスに基づいたフレームワークに切り替えるのは怖いかもしれません。

BootstrapのいくつかのクラスをTailwind CSSに置き換える方法を説明します。

HTML: Bootstrapの場合

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">column 1</div>
    <div class="col-6 col-md-4">column 2</div>
    <div class="col-6 col-md-4">column 3</div>
  </div>
</div>

<div class="col-6 col-md-4">column 1</div>

<div class="col-6 col-md-4">column 2</div>

<div class="col-6 col-md-4">column 3</div>

</div>

HTML: Tailwind CSSの場合

<div class="container mx-auto px-4">
  <div class="flex flex-wrap">
    <div class="w-6/12 md:w-4/12">column 1</div>
    <div class="w-6/12 md:w-4/12">column 2</div>
    <div class="w-6/12 md:w-4/12">column 3</div>
  </div>
</div>

<div class="w-6/12 md:w-4/12">column 1</div>

<div class="w-6/12 md:w-4/12">column 2</div>

<div class="w-6/12 md:w-4/12">column 3</div>

</div>

違いはどこですか？

Bootstrapでは複数のプロパティを含むクラス（.container, .row）がありますが、Tailwind CSSでは各クラスは1つのプロパティにのみ対応しています。

訳者注: 以前紹介した「CSSを改善する単一責任の原則」で、1つのclassに対して機能は1つだけにする、というものです。

Bootstrapがそんなに恋しいですか？

JavaScriptが機能の一部です！

Tailwind CSSとは異なり、BootstrapにはJavaScriptの部分があります。私がよく使用したJavaScriptの機能は、モーダルや折り畳みやタブやツールチップでした。

Tailwind CSSを使用した場合には、これらの機能を自分で作り直す必要はありますが、正直なところ、結果的には労力は非常に少なくなります。

BootstrapとTailwind CSSのどちらを使えばよいか？

必要に応じて、多くのプロジェクトではBootstrapでも十分だと思いますが、UIのデザインがカスタマイズされているプロジェクトではTailwind CSSの方が柔軟性と自由度がはるかに高いことは間違いありません。

Tailwind CSSを使用する時は、PurgeCSSを使用して未使用のCSSを削除することをお勧めします。この方法はMozillaでも使用されており、Tailwind CSSでFirefox Sendを構築し、PurgeCSSを使用して不要なCSSを削除します。詳しくは、下記ページをご覧ください。

How to Remove Unused CSS
日本語訳: CSSファイルから未使用のスタイルを削除する方法

CSSにかかる時間はかなり少なくなりました

私は長年Bootstrapを使用してきましたが、確かに使いやすかったです。しかし、Tailwind CSSを使い始めたところ、自由になり、CSSのコードも70%以上削減されました。確かに、完全になくなったわけではありません。しかし、以前まで記述していたコードの量を考えると、CSSにかかる時間はかなり少なくなったと言えます。

Tailwind CSSを始めると、最初の頃はすべてのクラスを記憶するのは大変かもしれません。しかし、慣れてしまえば、きっと気に入ると思います、私が保証します。