はじめに
こちらはTailwind CSSのバージョン3以降の記事になります。
TailWind CSSとは
Tailwind CSSはutility classを活用したCSS フレームワークです。CSSフレームワークにはBootstrapやMaterial UI などが挙げられますが、これらのフレームワークでは事前に準備されているボタンやカードなどのコンポーネントを活用します。
Tailwind CSSでは事前に準備されたコンポーネントなどはなく、utility classを使って独自にデザインを行ってコンポーネントを構築します。
BootstarpやMaterial UIとの違い
BootstrapやMaterial UIなどのフレームワークではコンポーネントが事前に準備されていることで、サイトのデザインを効率的に行うことができる反面、既存のコンポーネントを使いまわすことになるので同じようなデザインになりがちです。
それに比べてTailwind CSS ではコンポーネントが準備されていないため、開発者が異なるutility classを適用してコンポーネントを作成していくことになるため、結果的にオリジナリティの高いサイトを作成することができると考えられます。
TailWind CSSのメリット、デメリット
Tailwind CSSを使うことによるメリット、デメリットは以下が挙げられます。
メリット
-
柔軟性: 事前に準備されているボタン、メニューなどのコンポーネントは無いので開発者が自由にスタイルをカスタマイズできます。
-
クラス名を考える必要がない: Tailwind CSSが提供するユーティリティークラスを充てていくだけなので、開発者が要素に対してクラス名を考える必要がなくなります。
-
ファイルサイズの最適化: Tailwind CSSの問題点の1つとして、utility classはの膨大な量のコード(17万行程度)です。ビルド時に特に何もしなければ膨大なファイルサイズになってしまい、読み込みに時間がかかってしまいます。
しかし、バージョン2.1から導入されたJust-in-Time
(後述)という機能によってビルド時に必要なCSSのクラスのみを抽出するので、ファイルが最適化されます。
デメリット
-
学習コスト: Tailwind CSS独自で定めたユーティリティークラスがあるので(
border-radius
を表すrounded
など)、多少学習コストはあります。 -
可読性: スタイルを直接HTMLに適用するため、1つの要素に対して適用させるCSSが増えてくるとクラスが長くなってしまい、コードの可読性が下がってしまう可能性があります。
Tailwindをアプリケーションに組み込む方法
詳細な方法については、以下の公式ドキュメントに記載されていますのでもし良ければ参考にしてみてください。
上記の中で、@tailwind
というディレクティブを使って書かれた以下のCSSファイルのコードについて説明します。
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind
ディレクティブとは
そもそもTailwind CSSにおけるディレクティブ
とは、CSSファイルで使用できるTailwind固有の命令であり、Tailwind CSSプロジェクトで特別な機能を提供します。Tailwindで使用できるディレクティブには@tailwind
や@apply
など色々あります。詳細は以下の公式ドキュメントを参考にしてみてください。
@tailwind
というディレクティブはbase
、components
、utilities
という3つのオプションと一緒にCSSファイルに記述することで、ソースCSSファイルからビルドCSSファイルにコンパイルされ、特定のスタイルセットを読み込むことができます。簡単にですがそれぞれのコードを解説します。
@tailwind base
Tailwind CSSのベーススタイルを読み込むディレクティブです。これにより、ブラウザのデフォルトスタイルをリセットします(normalize.css
)
基本的にCSSファイルを記述していくときはreset.css
かnormalize.css
を最初に読み込み、ブラウザのデフォルトCSSを無効にしてコードを書いていくことになるので@tailwind base
は必須です、
@Tailwind components
Tailwind CSSのcontainer
クラスを読み込むディレクティブです。container
クラスの詳細については以下をご覧ください。
@tailwind utilities
文字通りTailwind CSSのユーティリティクラスを読み込むディレクティブです。沢山のクラスがあるため説明は割愛します。
しかし、このユーティリティークラスは膨大なクラスが存在するためコード量も膨大になり、ファイルサイズが大きくなってしまいます。
そのため次に解説するJust-In-Time
機能を使ってファイルサイズを最適化する必要があります。
Just-In-Time機能とは
実際に使われたクラスだけを抽出してビルドする機能です。これによってファイルサイズが最適化されます。
適用方法はtailwind.config.json
のcontent
に対して、実際にTailwind CSSのクラスが使われているディレクトリ、ファイルを記述するだけになります。
以下のようにcontent
に記述すると、src
配下の全てのディレクトリと.html
、.js
ファイルで使われたユーティリティークラスのみを抽出してビルドしてくれるようになります。
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};
テンプレートサイト
Tailwind CSSで開発するときに便利なテンプレートが載ってるサイトがありますので、もし良ければ参考にしてください。
チートシート
最新バージョンが2.2.19みたいですが、チートシートがありましたので良かったら参考にしてください。
おわりに
ここまで記事を読んでいただきありがとうございました。
間違いなどありましたらご指摘いただけると幸いです
参考