背景
今までの開発はBootstrapを用いて装飾やUIを開発していたため拡張性の高いといわれてるTailwind CSSを触りたいと思った。またこれからの開発に使いたいため。
目次
- Tailwind CSSとは
- 前提(環境)
- フォントの大きさ
- フォントの太さ
- フォントの色設定
- ボタン作成
- 疑似クラスの設定(hover, focus)
- Transition、Transformの設定
- Groupの設定
- まとめと感想
1. Tailwind CSSとは
Tailwind CSSとはutility classを活用したCSSフレームワークである。
Bootstrapなどでは事前に準備されたボタンやメニュー、パンくずリストなどのコンポーネントを活用してデザインしていく。
Tailwind CSSはコンポーネントは準備されておらずutility classを使って独自のボタンなどを作って使う。そのため拡張性は高い。
2. 前提
今回は簡単に触りたかったのでCDNを用いてHTMLファイルに直書きして使用。
3. フォントの大きさ
フォントの大きさは以下のように定義してフォントの大きさを変える。
-
text-{大きさ}
(例): text-xs (font-size:.75rem;), text-base, text-xl, ...
4. フォントの太さ
フォントの太さも大きさ同様。
-
font-{太さ}
(例): font-thin (font-weight:100;), font-extralight, font-medium, font-normal, ...
5. フォントの色の設定
フォントの色の変更は以下の通り。
-
text-{色}-{色の濃さ}
(例): text-green-100 (color: #f0fff4;), text-green-200, text-red-300, text-blue-500, ...
6. ボタンの作成
py-2やpx-4でパディングして余白を作ることやボタンテキストのカラーを白にしたり、roundedで角を丸くするなどしてボタンを作る。
<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>
7. 疑似クラスの設定 (hover, focus)
hoverやfocusを通してutility classを設定できる。
8. Transition、Transformの設定
hoverなどと合わせてdurationやtransformを設定することでutility classに動的な動きを付けられる。
9. Groupの設定
Groupを設定すること親要素へのアクションによって子要素へアクションを付けることができる。
例としてhoverを用いて親要素にカーソルが乗ると子要素がそれぞれ違う色へと変化する。
<div class="group m-10 p-10 border hover:bg-gray-100">
<p class="font-black group-hover:text-red-900">New Project</p>
<p class="font-black group-hover:text-blue-900">Next Project</p>
</div>
10. まとめと感想
初めてTailwind CSSを少し触れ、Bootstrapと比較したところ自分的にはBootstrapのほうが楽で早くUI作れるという感じ。しかしTailwind CSSは拡張性が高い分、自身がどれだけ工夫するかによってよりユニークなUIができそう。またいろいろなサンプルのデザインを組み込みやすい。
次はnpmでインストールして環境構築して使いたい。また自身でカラーや幅など簡単な部分のカスタマイズをしてみたい。