みなさん、こんにちは。
MEGIDO(メギド)です。

有名なCSSフレームワークとしてあげられるのはBootstrapでしょうか。
Bootstrapはコンポーネント型のCSSフレームワークです。
ボタン、ナビゲーション、フォームなどコンポーネント単位でスタイルが適用されます。

そんなコンポーネント型のCSSフレームワークと対になっているのが、
ユーティリティ型のCSSフレームワーク
ユーティリティ型のCSSフレームワークは余白やコンテンツの
大きさなど機能単位でスタイルが適用されます。

そんなユーティリティ型のCSSフレームワークで2020年から
日本でも人気になっているフレームワークが「Tailwind css」です。

PHPフレームワークとして有名なLaravelでも最新バージョン8から
Tailwind cssがデフォルトで使えるようになっています。

CSSフレームワークの一般知識として覚えておく必要があると思ったので
今回は「Tailwind css」について調べてみました。

 

Tailwind cssの説明と使い方

「Tailwind css」はユーティリティ型のCSSフレームワークです。

ユーティリティ型のフレームワークは、
CSSのスタイルごとにクラスが用意されてて、
これらを組み合わせて使用するように形になります

1つのクラス名に1つのCSSスタイルが適用されるイメージです。
1例ですが下記のようなコーディングをすると画像のようなボタンが出来上がります。

<a href=”” class=”bg-blue-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 mr-6″>
        Click here
</a>

 

Tailwind cssの使い方

Tailwind cssをコーディングで使用する方法は2つです。
nmpなどのパッケージ管理ツールでインストールする方法
CDNでTailwind cssを使用する方法があります。

後者のCDNを使う方法であるといくつかの機能が制限されます。
細かいところまでカスタマイズが必要になる実案件ではCDNではなく
パッケージ管理ツールでインストールすることをオススメします。

パッケージ管理ツールでインストールする必要があるので
少々、利用するにはハードルが高いかもしれません。

Tailwind cssがどんなものか確認したいというような感じであれば
CDNで試してみるのが良いと思います。

パッケージ管理ツールからインストールする方法は
公式ドキュメントを参考にしてください。

公式ドキュメント インストール方法

英語で記載されているので理解が難しいという方は
参考になる記事を読んでから公式ドキュメントを確認しましょう。
公式ドキュメントの確認はとても大事だと思います。

TailwindCSSを初めてインストールするときのメモ

 

Tailwind cssのメリット


Tailwind cssが人気でかなり使用率が高まっていますが、
使用するメリットはどこにあるのでしょうか?
Tailwind cssの公式ドキュメントによるとメリットが大きく3つ書かれていました。

どちらかと言うとTailwind cssのメリットというよりかは
ユーティリティ型のCSSフレームワークのメリットになっているかもです。

 

メリット1 CSS設計のコスト削減

CSSのコーディング作業をおこなったときに
クラス名を考える作業にかなり時間をとられ経験はないでしょうか?

フロントエンドサイドに従事されている方なら共感できるかと思います。
自分もCSSのコーディングでクラス名の命名を考えるのに時間がとられた経験があります。。。

しかしながらユーティリティ型フレームワークのTailwind cssを使用すると
クラス名の命名をする必要がなくなり、CSS設計をしなくてもよくなります

これによってCSS設計でかかっていた作業時間がかなり削減されるでしょう。
早く作業する必要性があるCSSコーディングで設計を考えなくてもよくなるのは
非常に大きいメリットになるでしょう。

 

メリット2 スタイルの変更を安全におこなえる

サイト公開をしてから追加依頼で「ここを変更してほしい」と希望がきて
該当箇所のCSSを修正したら、該当箇所以外もCSSが適用されてしまった経験はないでしょうか?

この部分だけ修正したいのに修正ができないから
追加でCSSを書き足すみたいな感じになったりと。

安全なCSS設計ができていればこのようなことは起こらないですが、
中々難しく知らずに発生してしまっているなんてこともあるかもしれません。

ユーティリティ型フレームワークのTailwind cssであればCSSを変更するわけではなく、
クラスを変更することになるのでクラス名を追加した部分だけCSSが変更されます。

HTMLの変更は影響範囲がその部分だけで済むので、
安全にスタイルを変更することが可能です。

 

メリット3 CSSサイズの肥大化抑止

Tailwind cssはCSSプロパティ1つ1つに対してクラス名が用意されるほど細かく、
ほとんどの場面で用意されているものだけで十分になります。

つまり開発者が独自にCSSを実装する必要がなくなり
CSSサイズが大きくなるのを抑制してくれます。

 

Tailwind cssを使う上で便利な参考サイト

Tailwind cssを使う上で参考になるサイトを3つほど紹介します。

Tailwind css 公式ドキュメント

1つ目は公式ドキュメントです。
すべて英語で書かれていますが、説明は分かりやすくサイドメニューから
探したいユーティリティをクリックすればやりたいことを簡単に見つけられると思います。

Tailwind css チートシート

2つ目はTailwind cssのチートシートのサイトです。
ある程度使い方になれて「このスタイルを適用させるクラス名は何?」と
なる時に使うとかなり重宝しそうです。

ユーティリティ型フレームワークは大量にクラス名が発生してしまうので、
全部覚えることは難しく、チートシートを使用していくのが現実的かなと思います。

Tailwind css コンポーネント集

上記のサイトはTailwind cssで使用してつくられた
コンポーネントがまとめられています。

無料で利用できるのでパパっとサイトを作成したい時は
ここのコンポーネントを使ってサイト制作すると良さそうです。

 

まとめ

今回はTailwind cssについてと使用する時に参考になるサイトを紹介しました。

フロントエンドに携わると方は今後、遭遇する機会が高いと思います。
時間ある中で勉強していきたいですね。

それでは今回はここまで。
最後までお読みいただきありがとうございました。

 

まとめ

SHARE

アバター
TEXT BY MEGIDO

CATEGORIES

RECOMMENDED POSTこの記事もおすすめ!