CSSフレームワーク「Tailwind CSS」のススメ

本日は、CSSフレームワーク「Tailwind CSS」（以下、Tailwind）のご紹介をしたいと思います。CSSの使用状況を調査した「The State of CSS 2020」で第1位となり、注目されているフレームワークです。

Tailwindとは

CSSフレームワークといえば、Bootstrapなどのすぐに使えるコンポーネント集を提供してくれるものといったイメージがあります。

Bootstrapでボタンを作る例

<button class="btn btn-primary">ボタン</button>

// 実際のCSS
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

これらは短い時間でデザインを行うことができる反面、カスタマイズ性が低かったり、所謂Bootstrapっぽいデザインになってしまうことにデメリットを感じる方もいらっしゃると思います。

Tailwindで定義されているクラスは「utility class」と呼ばれ、1つのクラスに対して1つのプロパティが当てられています。コンポーネントは用意されておらず、utility classを組み合わせてスタイリングを行います。これが「Utility-First」というアプローチです。

Tailwindでボタンを作る例

<button class="bg-blue-500 text-white px-4 py-2 rounded">ボタン</button>

// 実際のCSS
.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.rounded {
    border-radius: 0.25rem;
}

一見Bootstrapの方が簡単で良さそうですが、頭の中でイメージしたCSSを直接記述していけることがポイントです。Bootstrapでは余計なCSSまで吐かれてしまいますが、Tailwindでは当てたいCSSだけ記述していけます。

以上2点の例を見ただけでも、カスタマイズ性に優れていることがご想像できるのではないでしょうか。

Tailwindのメリット

設計コストの低減

You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.

Utility-First – Tailwind CSS

CSSクラスの命名はとてもコストのかかる作業です。Tailwindではそもそもクラス名の命名作業が自体がなくなります。

100%再利用のCSS

Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.

Utility-First – Tailwind CSS

utility classは、CSSプロパティ1つ1つに対して用意されているほど細かいので、100%再利用可能です。

安全なスタイル変更

Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.

Utility-First – Tailwind CSS

スタイルを変えたい場合はCSSを変えるのではなくHTMLのクラスを書き換えるので、影響範囲はそのHTMLのみです。

Tailwindのデメリット

メンテナンス性

基本的なボタンのようなコンポーネントでも、相当な数のクラスを記述する必要があります。これを様々な場所で使いまわしたい時、毎回コピーするとなるとメンテナンス性が損なわれることになります。これに対しては、フレームワークのテンプレートやJavaScriptコンポーネントを利用しましょう。こうすることでメリットを損なわずにメンテナンス性を担保できます。

クラス名の多さ

CSSプロパティ1つ1つにutility classがあると、その数も膨大です。そこでTailwindはVisual Studio Codeの拡張機能を用意しています。これにより、入力補完が効くためストレスなくスタイリングを行えます。また、マウスオーバーでプロパティの詳細も表示されます。

IntelliSense – Tailwind CSS

まとめ

ここまでお読みいただいた方はお気づきではないでしょうか。「これって単なるインラインスタイルではないか？」それはある意味正しいです。ただ、単なるインラインスタイルだとメディアクエリや擬似クラスが使えなかったりしますよね。

本来「見た目と構造は分離すべき」という考えからCSSが誕生しましたが、コンポーネントという概念が広まったことで、インラインスタイルの楽さとCSSの機能性を両立できるような状況が出揃ったのかなと思います。（インラインスタイル、楽ですよね。）

Tailwindを触り始めてから「これはだめだな」と思った要素は今のところ1つもありません。インストールはさておき、一度触ってみたいという方は以下のサイトでお試しできますので、是非その手で触ってみてください。

Tailwind Play