Tailwind CSS では，PurgeCSS を設定することで，本番環境にデプロイした際に生成される CSS ファイルのサイズを最適化することが出来ます。本記事では，静的ウェブサイトホスティングサービスである Netlify にデプロイした際に，Tailwind CSS を最適化した状態でビルドする手順について記述します。

Hugo には，assets ディレクトリ下に配置している CSS ファイルやメディアファイルなどのアセットを処理する Hugo Pipes が標準で実装されており，PostCSS も操作することも出来ます。また，Tailwind CSS をインストールする方法として Tailwind CLI や CDN を活用した方法の他，PostCSS のプラグインとしてインストールする方法があります。本記事では，これらの機能と特徴を活用して Hugo に Tailwind CSS をインストールする手順について記述します。

Hugo では，タグやカテゴリーなどを設定できる Taxonomy 機能の他に，content フォルダ内の階層構造に対応したツリー構造が生成できる Section 機能がデフォルトで提供されています。Section 機能を用いることで，SEO 対策で有効とされている「パンくずリスト」などを容易に実装することが出来ます。本記事では，セクションツリーリストを実装する手順について記述します。また，本記事で行っている作業は Hugo Ver.0.80.0 と Zorin OS 15 Core (Ubuntu 18.04 LTS) の環境下で実行したものです。Hugo は，インストール済みの前提で記述しており，インストール手順などは割愛していることを，ご了承下さい。

Tailwind CSS は，合計 220 色のカラーパレットがデフォルトで提供されています。また，tailwind.config.js を編集することによって，カラーパレットをカスタマイズすることが出来ます。本記事では，Tailwind CSS のカラーパレットをカスタマイズする方法について記述します。

複数の CSS フレームワークを組み合わせて利用する場合，btn や nav などの使用頻度が高いクラス名が衝突することがあります。そのため，一部の CSS フレームワークでは，特有の Prefix を追加することで，衝突を回避しています。例えば，UIkit の uk- などが挙げられます。

Tailwind CSS でフォームをカスタマイズする場合，input タグや select タグ，textarea タグなどのフォーム部品を直接カスタマイズすることも出来ますが，公式のプラグイン (tailwindcss-forms と tailwindcss-custom-forms) が公開されているので，プラグインを用いてカスタマイズする方法がオススメです。

Tailwind CSS は，FLOSS で開発されているユーティリティ指向の CSS フレームワークです。Bootstrap や UIkit などのコンポーネント指向の CSS フレームワークと比較すると知名度は高くないですが，新しいパラダイムの CSS フレームワークとして注目され初めています。

Tailwind CSS は，FLOSS で開発されているユーティリティ指向の CSS フレームワークです。Bootstrap や UIkit などのコンポーネント指向の CSS フレームワークと比較すると知名度は高くないですが，新しいパラダイムの CSS フレームワークとして注目され初めています。本記事では，Tailwind CSS の学習と開発を支援するサイトとツールを厳選して紹介します。