React 開発日記。開発からデプロイまで。#3

Day#3 ~ Tailwind ~ Bootsrtapとの違い

わんばんこ。みくのすけです。

Day#2でざっくりとTailwindの概要について学習しました。独特のルールに沿ってCSSを書く感じです。

例えば

<p class="text-blue-500 text-3xl font-bold underline">Hello world!</p>

本来であればclassName=”hoge” など命名後にstyleをあてますが、何をどうするのように直感的な書いていきます。

上記コードでtext-blue-500 なら、テキストの色を青にするんだなと言うことがわかります。

どうです、ここで思い出しませんか？

そうBootstrap。Bootstrapでのコードを見てみましょう。

<button class="btn btn-dark" type="button">Dark</button>

こちらもclassの名前にbtn-darkでボタンの色はダークなのだなと言うことがイメージできます。

似てますよね。で、このあたりはその様に思っている人が多いらしく、しまぶーさんがしっかり解説しています。

詳しくは解説をご覧ください。なのですが一応ポイントだけを押さえておくと以下の違いがあります。

1. 柔軟性
2. file-size
3. JSの依存性

柔軟性

Bootストラップの方が簡単に書ける。お弁当に例えると

お客「のり弁ちょうだい」

お店「はーい、のり弁ね」

お客はのり弁とオーダするだけで良い。

のり弁には『ご飯、のり、白身魚フライ、ちくわてん、ごぼうのきんぴら』がすでにパッケージになっているからだ。

これに対して、Tailwindだと注文する際に、

お客「えーとねご飯少なめ」

お店「ご飯少なめ」

お客「白身魚」

お店「はい、白身魚」

お客「てくわてん一本と」

お客「はい、ちくわてん一本」

・・・

のようにパッケージ化されていないから一つ一つオーダーすることになる。

これ一見Bootstrapの方が便利そうに見えるがこの辺は簡単さと柔軟性のトレードオフとなる。一つ一つオーダするためオリジナルのお弁当を作ることが可能になる。

file-size

purge CSSを用いるTailwindのほうがサイズが少なくなってパフォーマンスが高くなる可能性が高いそうです。purge CSSとはつかわないCSSコードを省いてくれるもの。認識合ってるかな。

JavaScriptへの依存性

ReactやVueなどを使うときに影響が出てくる様です。

Bootstrapは依存性あり、Tailwindはなし。

Bootstrapは依存している分だけ自分たちで管理できない部分が出てくる。例えばウインドウが開いているとか閉じているとかの状態管理をコントロールできないとか。あと、JSでうまくやってくれているがReactやVueなどJSフレームワークで開発する時はこれが障害となる。自分たちで管理したいんだがこれコントロールできないたためBootstrap側と競合することもある様だ。

まとめ

Tailwindの方がBootstrapにくらべ柔軟性が高い。JSフレームワークで開発することが多くなった現在、自分たちでコントロールするTailwindのほうが使い勝手が良い。

以上BootstrapとTailwindの違いでした。次回こそ実際にTailwindを動かすぞと。

Follow me!

@miku_nosuke