Tailwind CSSとは

Tailwind CSSは、モダンなユーザーインターフェースを構築するための高度に組み合わせ可能でカスタマイズ可能なユーティリティファーストのCSSフレームワークです。BootstrapやFoundationなどの従来のCSSフレームワークとは異なり、TailwindはHTMLファイルを離れることなく、ユニークなデザインを作成することができます。

ユーティリティファーストのアプローチ

ユーティリティファーストのアプローチは、Tailwind CSSの核となる原則です。従来のCSSの記述では、HTML要素にカスタムクラスやIDを作成し、それらのスタイルを別々のCSSファイルで定義する傾向があります。しかし、これによって大きな、扱いにくいスタイルシートやHTMLとCSSの間の不一致が生じる可能性があります。

一方、ユーティリティファーストのアプローチでは、ユーティリティクラスを使用して直接HTMLマークアップ内でスタイルを組み立てることを推奨しています。Tailwindの各ユーティリティクラスは、特定のCSSのプロパティと値のペアに対応しています。例えば、クラスtext-centerはCSSルール{ text-align: center; }を適用します。同様に、bg-blue-500は特定の青色を背景色として適用し、{ background-color: #3b82f6; }に対応します。

ユーティリティファーストのアプローチには、以下の利点があります。

• 迅速なプロトタイピング
  HTMLとCSSのファイルを切り替えることなく、マークアップ内でデザインのプロトタイプを素早く作成できます。

• メンテナンスのしやすさ
  スタイルがコンポーネントレベルで適用されるため、アプリケーションのさまざまな部分でスタイルが衝突するリスクが減ります。

• 高いカスタマイズ性
  各コンポーネントのデザインをリアルタイムでカスタマイズできるため、よりユニークで柔軟なデザインが可能です。

Tailwind CSSのセットアップ

Tailwind CSSをプロジェクトにセットアップする手順は次の通りです。

1. インストール
   Tailwind CSSはnpmパッケージとして利用可能です。インストールするには、マシンにNode.jsとnpmがインストールされている必要があります。その後、npm install tailwindcssというコマンドを実行して、Tailwind CSSをプロジェクトに追加します。

2. 設定ファイルの作成
   インストール後、npx tailwindcss initというコマンドを使用して、プロジェクトのためのデフォルトの設定ファイル（tailwind.config.js）を生成します。この設定ファイルでは、Tailwindのデフォルトの設定をカスタマイズしたり、新しいユーティリティを追加したり、バリアントの生成を制御したりすることができます。

3. CSS内でTailwindをインポート
   CSSファイルでは、@importディレクティブを使用して、Tailwindのベース、コンポーネント、ユーティリティスタイルを読み込む必要があります。CSSファイルの例を以下に示します。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

基本的なTailwind CSSユーティリティ

Tailwind CSSは、HTML要素にスタイルを適用するために必要なほとんどのCSSプロパティをカバーする豊富なユーティリティクラスを提供しています。いくつかのユーティリティについて詳しく見ていきます。

背景色

Tailwind CSSはさまざまな背景色のユーティリティを提供しています。要素の背景色を設定するには、bg-{color}というユーティリティを使用します。ここで、{color}は適用したい色のプレースホルダです。

例えば、div要素の背景色を青に設定したい場合、以下のようにします。

<div class="bg-blue-500">
    This is a blue div.
</div>

上記の例では、bg-blue-500がdivの背景色を特定の青色に設定します。Tailwind CSSは、さまざまな色のパレットを提供し、それぞれに異なるシェードを使用できます。

テキストの色とサイズ

テキストの色を設定するには、text-{color}というユーティリティを使用します。例えば、テキストを白色に設定するには、以下のようにします。

<div class="text-white">
    This is white text.
</div>

テキストサイズに関しては、Tailwindはtext-{size}という形式のユーティリティセットを提供しています。{size}にはxs、sm、base、lg、xl、2xl、3xl、4xl、5xl、6xlなどがあります。例えば、テキストを大きくするには、text-lgを使用します。

<div class="text-lg">
    This is large text.
</div>

パディング、マージン、スペーシング

Tailwind CSSは、包括的なスペーシングとレイアウトのユーティリティセットを提供しています。要素のパディングを制御するには、p-{size}というユーティリティを使用します。

<div class="p-4">
    This div has a padding size of 4.
</div>

同様に、要素のマージンを制御するには、m-{size}というユーティリティを使用します。

さらに、Tailwindでは、px-{size}、py-{size}、mx-{size}、my-{size}というユーティリティを使用して、縦方向と横方向のパディングとマージンを個別に制御することもできます。pt-{size}、pr-{size}、pb-{size}、pl-{size}、mt-{size}、mr-{size}、mb-{size}、ml-{size}といったユーティリティを使用して、個々の側面を制御することも可能です。

参考

https://tailwindcss.com/
https://tailwindcss.com/docs/installation