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

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

INDEX

Tailwind CSSとは？入門者向けに解説！
Tailwind CSSを使うメリットとは？
Tailwind CSSとBootstrapどちらを使うべき？
Tailwind CSSを使ってみよう！インストール方法は？

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

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

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

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

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

[スタイルシート]

p.bg { background-color:white; }

1	p.bg { background-color:white; }

[HTMLソース]

<p class="bg">文字</p>

1	<p class="bg">文字</p>

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

[HTMLソース]

<p class="bg-white">文字</p>

1	<p class="bg-white">文字</p>

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

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

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

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

＼文字より動画で学びたいあなたへ／

Udemyで講座を探す＞

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

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

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

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

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

height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&lt;/style&gt;

&lt;div class="example"&gt;&lt;/div&gt;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

</style>

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

<div class="flex items-center justify-center w-full h-full"></div>

1	<div class="flex items-center justify-center w-full h-full"></div>

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

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

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

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では下記のようにデバイスに合わせてそれぞれの設定を行います。

@media (min-width: 640px) { … }
@media (min-width: 768px) { … } 
@media (min-width: 1024px) { … }
@media (min-width: 1280px) { … }
@media (min-width: 1536px) { … }

@media (min-width: 640px) { … }

@media (min-width: 768px) { … }

@media (min-width: 1024px) { … }

@media (min-width: 1280px) { … }

@media (min-width: 1536px) { … }

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

sm //640px 
md //768px 
lg //1024px 
xl //1280px 
2xl //1536px

sm //640px

md //768px

lg //1024px

xl //1280px

2xl //1536px

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

スタイルの変更を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】

<button class="btn btn-primary" type="button">Primary</button>

1	<button class="btn btn-primary" type="button">Primary</button>

【Tailwind CSS】

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

1	<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Primary </button>

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

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

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

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

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

CDN経由

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

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

1	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

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

NPMでインストール

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

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

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

1	npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

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

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