皆さんこんにちは！Youta です。
今回は実務で Tailwind CSS を使うことになったので、予習として学んだ知識をまとめておこうと思います。
Tailwind CSS とは何か？
Tailwind CSS は、自由に組み立て可能なユーティリティクラスを活用し、独自性の高い Web サイトや Web アプリケーションのデザインを実現するための CSS フレームワークです。
ユーティリティクラスとは？
ユーティリティクラスは、例えば text-4xl text-green-700 text-center font-semibold のようなもので、これらを用いてデザインを構築します。
上記の例では、文字の大きさ、色、配置、太さという 4 つのユーティリティクラスが適用されています。
CSS フレームワークとは？
簡単にいうと"Web ページのパーツ集"みたいなもので、Web サイト制作を効率化するためのツールとして広く利用されています。
ボタンやテキストのスタイルから、タブ切り替えコンテンツ、ドロップダウンメニューなどの複雑な要素まで、多種多様なパーツが既にデザインとコーディングが施された状態で一式として提供されています。
Tailwind CSS の特徴
Tailwind CSS の特徴について説明します。
ユーティリティファーストの手法
Tailwind CSS の一番の特徴は、ユーティリティファーストという手法を採用していることです。これは、小さなスタイルの単位を組み合わせてデザインを作り上げる方法です。
この手法により、HTML 内で直感的にスタイルを適用でき、開発速度の向上を手助けしています。
レスポンシブデザインの容易な実装
Tailwind CSS では、レスポンシブデザインを簡単に実装できます。
ブレークポイントを指定することで、デバイスに応じたスタイルの変更が可能です。
例えば、md:text-lg というクラス名は、中サイズのデバイスでのみ大きなテキストサイズを適用します。
カスタマイズのしやすさ
Tailwind CSS は、プロジェクトの要件に合わせて簡単にカスタマイズできます。
tailwind.config.js ファイルを作成することで、新しい色やフォント、ブレークポイントを独自に設定できます。
これにより、プロジェクトごとに独自のデザインシステムを構築できます。
コンポーネントの再利用性
Tailwind CSS を使用すると、頻繁に使うスタイルの組み合わせをコンポーネントとして定義し、再利用が可能です。
これにより、コードの整理やメンテナンスが簡単になります。
PurgeCSS による最適化
Tailwind CSS は、ビルド時に PurgeCSS というツールを使用して、未使用のスタイルを削除することができます。
これにより、生成される CSS ファイルのサイズが最小限に抑えられ、パフォーマンスの向上が期待できます。
PurgeCSS は、Tailwind CSS の設定ファイル内で簡単に有効化できます。
Tailwind CSS のインストール方法
Tailwind CSS は npm を使って簡単にインストールできます。以下に基本的なインストール手順を示します。
npm を使用したインストール方法
npm install Tailwind CSSYarn を使用したインストール方法
yarn add Tailwind CSSTailwind CSS での基本的なスタイリング
Tailwind CSS では、HTML 要素に直接スタイルクラスを適用します。
HTML 要素へのスタイルクラスの適用方法
例えば、テキスト色を青に設定するには、text-blue-500クラスを使用します。
<p class="text-blue-500">これは青いテキストです。</p>テキスト色の設定例
上記の例では、text-blue-500クラスを使用して段落要素(<p>)のテキスト色を青に設定しています。
レスポンシブデザインと Tailwind CSS
Tailwind CSS では、ブレークポイントを使用してレスポンシブデザインを簡単に作成できます。
ブレークポイントを使用したレスポンシブデザイン作成方法
例えば、特定のブレークポイントでテキストサイズを変更するには、以下のようにします。
<p class="text-base sm:text-lg md:text-xl">このテキストはレスポンシブです。</p>テキストサイズ変更の例
上記の例では、sm:とmd:プレフィックスを使用して異なるブレークポイントで異なるテキストサイズを適用しています。
Tailwind CSS でのコンポーネント作成
再利用可能なコンポーネントを作成することも可能です。これは、@apply ディレクティブを使用して行います。
@apply ディレクティブを使用したコンポーネント作成方法
.btn {
@apply py-2 px-4 bg-blue-500 text-white rounded;
}Tailwind CSS を使ったプロジェクトの例
Tailwind CSS は以下のようなサイトで使用されています。
全国 11 万件の観光情報ガイド【JAPAN 47 GO】- 日本観光振興協会
以上が Tailwind CSS の基本的な使い方となります。
このフレームワークを使ってみることで、Web 開発がより効率的で楽しくなると思います。
