Tailwindcssって何？Bootstrapとの違いを分かりやすく解説
こんにちは。あきのです。
フリーランスでプログラミングやってます。
今回はTailwind CSSの使い方について解説しようと思います。
Laravel8を使っている人は知っているかもしれませんが、Tailwind CSSというCSSのフレームワークがあります。
あまり聞きなれないものなんですが、使ってみるとかなり使い勝手が良くて初心者でも十分使えるフレームワークでした。
Tailwind CSSがどういうもので、よく比較されるBootstrapと何が違うのかをお話して、使い方を簡単に説明していきます。
では、行きましょう。
Tailwind CSSはBootstrapと同じです。
まず結論をお話すると、Tailwind CSSとBootstrapはほぼ一緒です。
Tailwind CSSはCSSフレームワークで、要は「特定のクラスをつけるだけで色や位置を整えられますよ」というものです。
Bootstrapも同じですよね。
例えばボタンを作成したいときは
<button class="btn btn-primary">ボタン</button>
と書けば、青色のボタンがエフェクト付きで生成されます。
これはbtnとbtn-primaryというBootstrapであらかじめ設定されたクラスをつけることで僕らがクラスを定義してスタイルをつけなくても出来上がるというわけです。
Tailwind CSSでも同じことができるということです。
Bootstrapとの違いは「自由度」
ただ、この二つが全く一緒というわけではないです。一緒だったら2つもいりませんから。
最も大きな違いはTailwindCSSの方が自由度が高いです。
例えば指定できる色については
- Bootstrap: 13個ほど
- TailwindCSS: 90個ほど
これくらいの差があります。
例えば、Bootstrapで文字を赤色を使いたい場合はtext-dangerの1つしかないんですが、TailwindCSSだとtext-red-400だったりtext-red-600と、色を100, 200, …と100ごとに指定できるんですね。
ボタンも色の種類は少なく、ホバーエフェクトも1つしかないです。
しかし、TailwindCSSなら色が豊富でホバーエフェクトも自由に変えられます。
Tailwind CSSの使い道はこの「自由度」を取るかどうか
ただ、Bootstrapがダメかというとそういうわけでもなくて、BootstrapとTailwind CSSそれぞれに長所・短所があります。
Bootstrapの長所は
- 自由度が高い
- Bootstrapより直感的に使える
短所は
- 記述がBootstrapより長い
- 参考記事が少ない
Bootstrapはこれを逆にしたのが長所と短所です。
ポイントは「自由度が高いけど、その分複雑になる」のを取るか「多少ありきたりなデザインだけど、簡潔になる」のを取るかです。
例えばボタンを作成するときにBootstrapではさっき見た通り
<button class="btn btn-primary">ボタン</button>
ですが、Tailwind CSSだと
<button class="py-2 px-3 bg-green-500 rounded hover:bg-green-300 focus:ring-4 focus:ring-green-500 focus:ring-opacity-50">ボタン</button>
と若干長いです。
しかし、色などや外枠など細かい部分も設定できます。
Tailwind CSSの使い方
ではTailwind CSSを使ってみましょう。基本的に公式ページを見ればOKです（英語ですが）。
CDNを利用する場合
Bootstrapと同じ要領で以下のコードをheadタグの中に入れます。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">npmでインストールする場合
Node.jsがインストールされていることを確認して以下のコマンドを打ちます。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest次にcssファイルを作成して以下を記述します。
@tailwind base;
@tailwind components;
@tailwind utilities;以上です。後はHTMLでこのcssファイルを読み込んでBootstrapの要領でクラスを打ち込んでスタイルを適用させます。
Tailwind CSSでよく使うクラス
最後にTailwind CSSでよく使うクラスを見て終わりにしたいと思います。
色シリーズ
色は主にgray, red, green, blue, yellow, indigo, purple, pinkの8種類あり、それぞれを50, 100, 200, …, 900と原則100ずつに区切っています。
例えばgray-300だったりyellow-100だったり。
文字に色を付けたい場合はtext-gray-300、背景に色を付けたい場合はbg-yellow-100のように使います。
大きさシリーズ
widthやheightを設定することもできます（これはBootstrapにはない）。
- 横幅なら
w-oo、高さならh-ooと記述 ooには、0～96の間の原則4の倍数ごとの数字を入れられる- 単位は
rem
例えばw-20と設定すると横幅が5remになります。
単位がremで若干とっつきにくいんですが、1rem = 15px（もしくは16px）として考えてOKです。
余白シリーズ
書き方はBootstrapと全く同じです。marginだったらm-oo、paddingだったらp-oo/code>。
数字もwidthと全く同じで、4区切りで入れられます。
というわけで、以上です。ではでは。
スポンサードサーチ