Tailwind CSSに入門する

モバイルアプリプログラマがWebフロントの仕事を振られてしまった。
まずCSSをTailwind CSSで記述したいので、Tailwind CSSを学ぶ。

Tailwindの意味は「追い風」。テールウィンド。そこはかとなくかっこよい。

公式サイトによると

「様々なクラスを搭載したユーティリティファーストのCSSフレームワーク」

ユーティリティファーストとは？

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つの方法がある。

Tailwind CLIを使うのが最もシンプル。CLIはスタンドアロンの実行ファイルとしても提供されているのでNode.jsをインストールせずに利用できる。

PostCSSプラグインとしてインストールするとwebpack、Rollup、Vite、Parcel等のビルドツールとシームレスに統合される。

対応するフレームワークで利用するにはそれぞれのフレームワークのドキュメントを参照する。対応するフレームワークにはNext.js・Nuxt.js・Laravel等がある。

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プロパティでは自動的にベンダープレフィックスが追加される。