[雑] Tailwind CSS の概要と v3.0 の紹介
この記事はとくになんのアドベントカレンダーにも属していません。
皆さん 2021年のクリスマス、いかがお過ごしでしょうか。自分は今からカニを食べます。
そうです。今、カニを流水解凍しながらこの記事を書いています 🦀
この記事は最近使い始めたばかりの Tailwind CSS についてざっくり概要をまとめるのと、 v3.0 が最近出たので何ができるようになったのかをざっくり把握する目的で書きました。
本当に雑なので 公式ドキュメント を読むことをおすすめします。
What's Tailwind CSS ?
A utility-first CSS framework packed with classes like
flex,pt-4,text-centerandrotate-90that can be composed to build any design, directly in your markup.
It's fast, flexible, and reliable — with zero-runtime.
速くて柔軟で堅実で zero-runtime で utility-first なCSS フレームワーク。
→ utility-first とは？
Utility-First
ref: Utility-First Fundamentals
CSS を書かずに、たくさん用意されている utility クラスを使ってスタイルを組み上げていくもの。
- 👍 クラスの命名に悩む必要がない
- 👍 どんなデザインシステムにも合わせやすい → 柔軟性が高い
- 👍 変更を加えやすい → 保守性が高い
- 🤔 HTML (あるいは JSX) が読みづらくなる
Tailwind vs Inline styles
- 👍 制約のあるデザイン
- v3.0 の Arbitrary properties と矛盾している感じはある
- 👍 State variants: レスポンシブデザインや Hover, Focus などの状態を処理できる
- 🤔 独自記法なので学習コストがある
Tailwind vs Bootstrap
- 👍 Bootstrap よりも低レベルなフレームワークなので、より柔軟にカスタマイズできる
- 🤔 全部1からスタイルを構築しないといけないとも言える
Tailwind vs CSS-in-JS
- 👍 zero-runtime なので高パフォーマンス
- 🤔 型の恩恵が受けられない
- 🤔 開発時の CSS ビルドファイルが重い
Tailwind: Pros / Cons
👍 Pros
- utility-first
- クラスの命名に悩む必要がない
- どんなデザインシステムにも合わせやすい → 柔軟性が高い
- 変更を加えやすい → 保守性が高い
- zero-runtime で高パフォーマンス
🤔 Cons
- HTML (あるいは JSX) が読みづらくなる
- 使い始めはここがだいぶ抵抗ある
-
eslint-plugin-tailwindで クラスをソートしてくれたりはする -
@applyで utilites を1つのクラスにまとめて定義することもできる (意味論からは逃れられない、本末転倒感はある) - 良さげな解決案があれば知りたい
- 独自記法なので学習コストがある
- エディタの拡張機能による補完でカバーできるにはできる
- 型の恩恵が受けられない
- 少なくとも補完は拡張機能でカバーできる
- 良さげな解決案があれば知りたい
- 開発時の CSS ファイルが重い (ブラウザの読み込み時間が長い)
- 後述の Just-in-Time engine で解決！
About Tailwind CSS v3.0
Tailwind CSS v3.0 を読めばだいたい分かります。
Just-in-Time engine
ref: Just-In-Time: The Next Generation of Tailwind CSS
v3.0 から標準搭載 (v2.1 から実験的サポート) された新しい CSSコンパイラ。
使用している CSS ファイルのみを都度コンパイルすることで 開発時の膨大な CSS ファイルを本番同様に軽量化し、ビルド時間も短縮。
→ 開発時の CSS ファイルが膨大だったことで制限されていた 一部機能が JIT の使用により開放!
- すべての variants (
active:,disabled:など) がデフォルトで使用可能に - Arbitrary properties:
top-[-113px]のように任意のスタイルを書けるように- あくまでエッジケースへの対処法
Other Features Digest
- Every color out of the box: カラーパレットの拡張
- Colored box shadows: 色付き
box-shadowのサポート - Scroll snap API: スクロールしてピタッと止まるやつ
- Multi-column layout: 新聞みたいなレイアウト、フッターにも便利
- Native form control styling: ネイティブのラジオボタン、チェックボックス、インプットに直接スタイルを付与
- Print modifier: 印刷時のスタイルを指定できるように
- Modern aspect ratio API:
aspect-ratioに対応 - Fancy underline styles: 波線とか破線とか
- RTL and LTR modifiers: 横書きの Right to Left, Left to Right のサポートを実験的に導入
- Portrait and landscape modifiers: Viewport の縦横でスタイルを付与できるように
- Play CDN: script タグで CDN ビルド
Summary
- Tailwind CSS は Utility-First で高い柔軟性と保守性を備えた CSSフレームワーク
- v3.0 で搭載された Just-in-Time エンジンにより、開発時 の CSS ファイルを本番同様に軽量化し、ビルド時間も短縮
- JIT による軽量化によって、制限されていた variants や、任意のスタイル を記述できる arbitrary properties などが利用可能に
- v3.0 では他にも Scroll snap API や Colored box shadows, Multi-column Layout など便利な機能が実装
Discussion