Open7

Tailwind CSSに入門する

rizumitarizumita

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

公式サイト↓
https://tailwindcss.com/

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

公式サイトによると

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

rizumitarizumita

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

  • CSSの設計原則の一つ
  • 小さなスタイルクラスを使って、再利用可能で効率的なスタイルを作成する方法
  • ユーティリティクラスと呼ばれる小さなスタイルルールを組み合わせることによって、HTMLの要素に直接適用される
  • プロジェクト全体の一貫性を保ちながら、迅速かつ簡単にスタイルを変更できる
rizumitarizumita
  • Tailwind CSSはビルドする際に未使用CSSを自動的に削除するのでバンドルサイズが小さくなる。
  • 繰り返す利用するユーティリティはパーシャルに抽出することで一ヶ所で変更を管理できる。
  • @applyディレクティブを利用すると、クラス名のリストをコピー&ペーストするだけで繰り返されるユーティリティパターンをカスタムCSSクラスに抽出することができる。
  • ユーティリティの前にdark:を付けると、ダークモードが有効な時にそのユーティリティが適用される。
  • tailwind.config.jsを使用して、独自のデザインシステムを構築することができる。
  • Visual Studio Code Extensionを利用してオートコンプリートなどの便利な機能が使える。
  • Tailwind UIはUIコンポーネントのコレクション。
  • Tailwind CSSはすべてのHTMLファイルやJavaScriptコンポーネント、その他のテンプレートをスキャンしてクラス名を探し、対応するスタイルを作成して静的なCSSファイルに書き込むことで動作する。
rizumitarizumita

Tailwind CSSの4つのインストール方法

インストールには4つの方法がある。

1. Tailwind CLI

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

https://tailwindcss.com/docs/installation

2. PostCSS

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

https://tailwindcss.com/docs/installation/using-postcss

3. 対応するフレームワークによる導入

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

https://tailwindcss.com/docs/installation/framework-guides

4. CDN

CDNはビルドステップなしでブラウザ上でTailwindを試用できる。開発用として設計されているので、実運用には適していない。

https://tailwindcss.com/docs/installation/play-cdn

rizumitarizumita

エディタ

VSCodeはTailwind CSS IntelliSense でオートコンプリート・シンタックスハイライト・Lintなどが提供される。

PrettierのTailwind CSSプラグインを導入すると推奨するクラス順序に従って自動的にクラスをソートする機能が利用できる。

JetBrains IDEはJetBrainsが提供しているTailwind CSSプラグインを導入する。

rizumitarizumita

最適化

ミニフィケイションやネットワーク圧縮と組み合わせることで大規模なプロジェクトでも10kB以下のCSSファイルになる。

サイズが小さいのでページごとにCSSファイルを分割する必要が無い。

cssnanoでCSSを最小化し、Brotliで圧縮する。

Tailwind CLIを利用している場合は--minifyフラグをつけるとminifyできる。

PostCSSプラグインとしてインストールしている場合は、プラグインリストの最後にcssnanoを追加する。

フレームワークを使用している場合はドキュメントを確認する。

rizumitarizumita

対応するブラウザ

Chrome・Firefox・Edge・Safariの最新の安定版に対応している。IEはサポートしていない。

Tailwind CSSのほとんどの機能はすべてのぶらうざでどうさするが、すべてのブラウザではサポートされていない最先端の機能のAPIも含んでいる。

ベンダープレフィックスを必要とするCSSプロパティでは自動的にベンダープレフィックスが追加される。