Tailwind CSSに入門する
モバイルアプリプログラマがWebフロントの仕事を振られてしまった。
まずCSSをTailwind CSSで記述したいので、Tailwind CSSを学ぶ。
公式サイト↓
Tailwindの意味は「追い風」。テールウィンド。そこはかとなくかっこよい。
公式サイトによると
「様々なクラスを搭載したユーティリティファーストのCSSフレームワーク」
ユーティリティファーストとは?
- CSSの設計原則の一つ
- 小さなスタイルクラスを使って、再利用可能で効率的なスタイルを作成する方法
- ユーティリティクラスと呼ばれる小さなスタイルルールを組み合わせることによって、HTMLの要素に直接適用される
- プロジェクト全体の一貫性を保ちながら、迅速かつ簡単にスタイルを変更できる
- Tailwind CSSはビルドする際に未使用CSSを自動的に削除するのでバンドルサイズが小さくなる。
- 繰り返す利用するユーティリティはパーシャルに抽出することで一ヶ所で変更を管理できる。
- @applyディレクティブを利用すると、クラス名のリストをコピー&ペーストするだけで繰り返されるユーティリティパターンをカスタムCSSクラスに抽出することができる。
- ユーティリティの前にdark:を付けると、ダークモードが有効な時にそのユーティリティが適用される。
- tailwind.config.jsを使用して、独自のデザインシステムを構築することができる。
- Visual Studio Code Extensionを利用してオートコンプリートなどの便利な機能が使える。
- Tailwind UIはUIコンポーネントのコレクション。
- Tailwind CSSはすべてのHTMLファイルやJavaScriptコンポーネント、その他のテンプレートをスキャンしてクラス名を探し、対応するスタイルを作成して静的なCSSファイルに書き込むことで動作する。
Tailwind CSSの4つのインストール方法
インストールには4つの方法がある。
1. Tailwind CLI
Tailwind CLIを使うのが最もシンプル。CLIはスタンドアロンの実行ファイルとしても提供されているのでNode.jsをインストールせずに利用できる。
2. PostCSS
PostCSSプラグインとしてインストールするとwebpack、Rollup、Vite、Parcel等のビルドツールとシームレスに統合される。
3. 対応するフレームワークによる導入
対応するフレームワークで利用するにはそれぞれのフレームワークのドキュメントを参照する。対応するフレームワークにはNext.js・Nuxt.js・Laravel等がある。
4. CDN
CDNはビルドステップなしでブラウザ上でTailwindを試用できる。開発用として設計されているので、実運用には適していない。
エディタ
VSCodeはTailwind CSS IntelliSense でオートコンプリート・シンタックスハイライト・Lintなどが提供される。
PrettierのTailwind CSSプラグインを導入すると推奨するクラス順序に従って自動的にクラスをソートする機能が利用できる。
JetBrains IDEはJetBrainsが提供しているTailwind CSSプラグインを導入する。
最適化
ミニフィケイションやネットワーク圧縮と組み合わせることで大規模なプロジェクトでも10kB以下のCSSファイルになる。
サイズが小さいのでページごとにCSSファイルを分割する必要が無い。
cssnanoでCSSを最小化し、Brotliで圧縮する。
Tailwind CLIを利用している場合は--minifyフラグをつけるとminifyできる。
PostCSSプラグインとしてインストールしている場合は、プラグインリストの最後にcssnanoを追加する。
フレームワークを使用している場合はドキュメントを確認する。
対応するブラウザ
Chrome・Firefox・Edge・Safariの最新の安定版に対応している。IEはサポートしていない。
Tailwind CSSのほとんどの機能はすべてのぶらうざでどうさするが、すべてのブラウザではサポートされていない最先端の機能のAPIも含んでいる。
ベンダープレフィックスを必要とするCSSプロパティでは自動的にベンダープレフィックスが追加される。