Tailwind CSSとは？ユーティリティファーストの意味や使うメリットをくわしく解説！

『Tailwind CSS』とは、Utility Firstを掲げて設計されたCSSフレームワークです。Bootstrapとは異なり、細かくデザインを作ることができるため、使い勝手を知りたい方も多いのではないでしょうか。そこで今回は、Tailwind CSSの基本概要とメリット、インストール方法まで解説します。

Tailwind CSSとは？入門者向けに解説！

『Tailwind CSS』とは、Utility First（ユーティリティファースト）をコンセプトに設計されたCSSフレームワークのことです。Tailwindは“テールウィンド”と読みます。Tailwind CSSはオープンソースとなっているため、無料で使用可能です。ちなみに、CSSの基本概要が知りたい方、改めて知識を確認しておきたい人は、「CSSとは？初心者でも必ずCSSが書ける方法をわかりやすく解説！」を参照してください。

ご紹介した通り、『Tailwind CSS』はユーティリティファーストの考え方が採用されており、コンポーネントの代わりにユーティリティクラスを使用します。コンポーネントは、出来上がったデザインを自分好みにカスタマイズするものですが、ユーティリティクラスを使用することで、コンポーネントよりも、レイアウトやボタンの配置等を細かく設定することができます。その点で、カスタマイズ性に優れているといえるでしょう。

なお、『Tailwind CSS』はCSSのプロパティごとにユーティリティクラスが準備されています。そして、そのユーティリティクラスをHTMLのクラス属性に追加していくことで使用可能です。

例えば、背景色を白にする場合、CSSで記述すると下記のようになります。

[スタイルシート]

[HTMLソース]

一方、Tailwind CSSは下記のようにクラス指定を行うのです。

[HTMLソース]

もちろん、背景を白にするだけでなく、CSSで使用するほぼすべてのクラスが用意されています。例えば、余白やパディング、フォントサイズ、テキストの色、影、フォントサイズなどです。柔軟にカスタマイズができるので、Web開発で注目されているCSSフレームワークになります。

ユーティリティファーストとは？

ユーティリティファーストとは、CSSは使わずにTailwind CSSが提供しているクラスのみを使用してスタイリングする考え方のことです。rounded-fullやtext-transparentなど、クラスを追加するだけで定義できるため、コードの量が少なくなります。

CSSの各プロパティに対応できるユーティリティクラスが準備されているため、すべてのクラスを頭に入れるのは簡単な作業ではありません。しかし、一度覚えてしまえば効率的にコードを書くことができるようになるため、非常に便利です。

　

Tailwind CSSを使うメリットとは？

Tailwind CSSを使用することでどのようなメリットを得られるのか詳しく解説します。初心者でもわかりやすいようにご紹介しますので、ぜひ最後まで読んでみてください。

コードの記述量を削減できる

まず、コードの記述量を抑えられる点がメリットです。コードの記述量が少ないと短時間で自分好みのデザインを実現することができます。そのため、開発スピード向上にもつなげられるでしょう。また、コードがシンプルで読みやすいため、メンテナンス性も向上します。

実際に、どのぐらい記述量が少なくなるのかチェックしていきましょう。まず、CSSでスタイリングした場合のコードです。

次に、Tailwind CSSを使用した例です。

スタイルシートでスタイリングする必要がないため、コード量が非常に少なくなっているのがわかります。

デザインシステムの構築が可能になる

もう一つのメリットとしては、デザインシステムの構築ができる点が挙げられます。

Tailwind CSSは、各クラスで大まかなデザインが決められています。例えば、フォントサイズはクラスによって「とても小さい」、「とても大きい」など大まかにサイズを変更することが可能です。

• text-xs
• text-9xl

CSSのようにフォントサイズを0.1remごとに設定しなくてもいいため、チーム内でサイズを統一しやすくなります。また、「0.9remなのか、それとも1.0remに設定すればいいのか迷う」というようなことが起きづらくなるため、意思決定コストを下げられることも魅力のひとつです。

柔軟にカスタマイズできる

柔軟にカスタマイズできることもメリットになるでしょう。Tailwind CSSには標準で下記のようなプロパティが用意されています。

• theme
• extend
• variants

themeは画面のブレークポイント等を定義することが可能です。また、extendは既存のテーマを拡張することができます。variantsはクラスの生成をコントロールできるプロパティです。例えば、マウスがボタンの上に乗ったときだけ、文字が大きくなるスタイルを適応するというようなことができます。

このように、Tailwind CSSには拡張やコントロールするためのプロパティが揃っているため、柔軟なカスタマイズができるCSSフレームワークです。

レスポンシブ対応が容易

簡単にレスポンシブデザインに対応させられる点もメリットといえるでしょう。レスポンシブデザインに対応させるため、CSSでは下記のようにデバイスに合わせてそれぞれの設定を行います。

一方で、Tailwind CSSは下記のように表現するだけで済みます。

画面サイズに合わせてどのようなサイズのレイアウトや画像にするのか簡単に指定できるため非常に便利です。

スタイルの変更をHTML上で行える

スタイルの変更をHTML上でできるという点もメリットになります。HTMLファイルとスタイルシートを行き来する必要がないため、作業効率のアップが期待できるでしょう。

また、CSSは同じクラスが適応されたタグが複数ある場合、定義を変更するとすべてが変わってしまいます。一方、Tailwind CSSはクラス属性に直接追加するため、定義変更した際の影響範囲が狭いです。

　

Tailwind CSSとBootstrapどちらを使うべき？

Bootstrapは、デザインされたコンポーネントを提供してくれる最も人気のあるCSSフレームワークのひとつです。CSSファイルやデザインに動きを加えるJavaScriptファイルが作成されており、ルールに沿って作ることで高品質のデザインを実現してくれます。

Bootstrapについてもっと詳しく知りたい方は「Bootstrapの使い方！Web開発初心者にもわかりやすく解説」を参照してください。

Bootstrapは、動きをつけたい場合でもJavaScriptの知識が不要です。一方、Tailwind CSSはユーティリティクラスが準備されているだけなので、動きを加える際はJavaScriptで一から実装しなければなりません。

また、BootstrapはCSSの知識が必要なく、触れる機会も少ないです。一方、Tailwind CSSは、このクラスはどのようなCSSプロパティに該当するのか調べたりすることが多いため、自然にCSSの知識を身につけられます。

このように、BootstrapとTailwind CSSにはそれぞれメリットとデメリットがあるので、どちらを使えばいいのかわからない方もいるのではないでしょうか。これから、Tailwind CSSとBootstrapを具体例で比較しますので、どちらを使えばいいのか迷っている方はぜひ参考にしてください。

Tailwind CSSとBootstrapを具体例で比較！

Bootstrapで提供されているコンポーネントをそのまま利用する、もしくは少しカスタマイズして使いたいという方はBootstrapのほうが便利です。ボタンを作成する場合を比較してみましょう。

【Bootstrap】

【Tailwind CSS】

コード量はBootstrapのほうが少なく、コンポーネントをそのまま利用したい人はBootstrapのほうが便利です。

逆に、カスタマイズをする機会が多い人はTailwind CSSを使ったほうがいいでしょう。例えば、上記のPrimaryボタンのデザインを変更する場合、CSSで上書きしたり、直接ファイルを編集したりしなければなりません。つまり、手間がかかるのです。

一方、Tailwind CSSはクラスを追加して細かくデザインを設定していくことができます。カスタマイズ性に優れているため、コンポーネントをそのまま使うのではなく、オリジナリティを優先させたいという方におすすめです。

　

Tailwind CSSを使ってみよう！インストール方法は？

最後に、Tailwind CSSのインストール方法をご紹介します。インストール方法はCDN経由とNPMの2種類です。

CDN経由

1.HTMLファイルのヘッダー部分に下記のコードを挿入します。

2.挿入すれば、Tailwind CSSの使用が可能です。

NPMでインストール

1.コマンドラインツールを立ち上げます。

2.下記のようにnpmコマンドでインストールします。

3.下記の画像のように表示されれば、インストール成功です。

　

今回は、Tailwind CSSの概要とメリット、インストール方法をご紹介しました。ご紹介した通り、Tailwind CSSはBootstrapと同様に優れてフレームワークです。今後、Web開発等で使用する機会も多くなることが予想されるため、この機会にTailwind CSSを習得してみてはいかがでしょうか。