Tailwind CSSとは #CSS

はじめに

こちらは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ファイルのコードについて説明します。

src/index.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ファイルで使われたユーティリティークラスのみを抽出してビルドしてくれるようになります。

tailwind.config.json

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

テンプレートサイト

Tailwind CSSで開発するときに便利なテンプレートが載ってるサイトがありますので、もし良ければ参考にしてください。

チートシート

最新バージョンが2.2.19みたいですが、チートシートがありましたので良かったら参考にしてください。

おわりに

ここまで記事を読んでいただきありがとうございました。

間違いなどありましたらご指摘いただけると幸いです

Tailwind CSSとは

はじめに