序文: なぜTailwind CSSなのか？

まず、覚えなければならないのは、直接htmlにコードを書く場合、必ずBootstrapを選んでください。私にとって、HTMLファイルに直接TailWindを使うとかなり災難だと思います。 その理由：

1. Tailwind CSS自体のファイルサイズが大きいこと。これに対し、Bootstrapの最小化されたCSSファイルは小さいです。
2. TailWindでは非常に多く、かつ細かいCSSクラスの存在により、HTML上でのクラスの重複や不格好な記述が避けられなくなります。

但し、それにもかかわらず、なぜ現代のWeb開発業界はTailwind CSSが広く採用されているのでしょうか？ その答えは、フロントエンド開発の手法が従来の「直接HTMLにコードを書く」スタイルから「Node.jsモジュールを用いた開発フレームワーク」へと移行しているからです。 この新たな開発パラダイムの下で、Tailwind CSSは以下のような利点を提供します：

1. 「npm run build」を実行する際、Tailwind CSSをサポートするエンジンは使用されたクラスのみをビルドしたコードに組み込むため、最終的なファイルサイズはBootstrapよりも小さくなります。
2. Node.jsモジュールを用いた開発フレームワークの「コンポーネント」機能を活用することで、クラスの重複や不格好な記述を避けることが可能になります。
3. VSCodeでのサポートが非常に優れています。

Node.jsモジュールを用いた開発が主流となっている今日、その利便性によりTailwind CSSもまた主流になりつつあります。

Bootstrapユーザーへ: 恐れることはありません！

難しく考えなくてもよい、なぜなら、我々BootStrapでもGrid(row/col)システムとFlexシステムしか使わないため、 TailWindに乗り換えても、この3点の知識ポイントが抑えれば問題なく開発できます。

1. Tailwind CSSでは「container」クラスを使用する際には必ず「mx-auto」を一緒に記述する必要があります。

 <div class="container mx-auto"> 

2. TailWindは、Flexだけ使う：

• Flexの概念では、TailWindとBootStrapが同じ：

  TailWind	BootStrap
  flex	d-flex
  flex-row	flex-row
  flex-col	flex-column

• BootStrapのGridシステムをTailWindで実現する場合

  TailWind	BootStrap	説明
  flex flex-row flex-wrap	row	「flex-wrap」:自動改行許可
  w-full	col-12	スマホ
  md:w-1/2	col-md-6	iPad Mini(縦)
  lg:w-1/3	col-lg-4	iPad Pro(縦)
  xl:w-1/4	col-xl-3	iPad Pro(横)/PC

※TailWindでは「Grid」という機能がありますが、BootStrapの「Gridシステム」とは違う概念です。

3. 表示と非表示の制御も、Tailwind CSSとBootstrapで類似の機能が提供されていますが、クラスの命名が異なるため注意が必要です。

• 表示/非表示

  TailWind	BootStrap
  invisible	d-none
  md:visible	d-md-block

TailWindがBootStrapよりいいところ： 統一されている記述方法

• デバイスサイトのコントロール：

  クラス記入	デバイス
  何も書いていない場合	スマホ
  md:クラス名	iPad Mini(縦)
  lg:クラス名	iPad Pro(縦)
  xl:クラス名	iPad Pro(横)/PC

• ダークモード：

  クラス記入	説明
  何も書いていない場合	lightモード
  dark:クラス名	darkモード

Tailwind CSSにおける状態指定のスタイリング

Webインターフェースにおいて、ユーザーのインタラクションを視覚的に伝えることは非常に重要です。Tailwind CSSは、この点において非常に柔軟かつ強力な機能を提供しています。以下では、ユーザーのアクションに応じたスタイルの適用方法について、特に注目すべきいくつかの状態を取り上げます。

• hover：ユーザーが要素にマウスを乗せたときに適用されるスタイルです。例えば、ボタンにカーソルを合わせた際に色を変えたい場合に用います。

<button class="bg-blue-500 hover:bg-blue-700 ...">ボタン</button> 

• focus：要素がフォーカスを受けている（例えば、入力フィールドにカーソルがある）時に適用されるスタイルです。アクセシビリティの向上にも寄与します。

<input class="focus:border-blue-500 ..." /> 

• focus:invalid：フォームのバリデーションに失敗したときに適用されるスタイルで、ユーザーが入力したデータが要件を満たしていないことを視覚的に示します。

<input class="focus:invalid:border-red-500 ..." /> 

• has:[state]：特定の状態を持つ子要素を含む親要素にスタイルを適用します。例えば、チェックされたチェックボックスを持つフォーム要素に特定のスタイルを適用したい場合に使用します。

    <div class="has:[checked]:border-green-500 ...">   
         <input type="checkbox" />   
     </div> 

<button class="dark:md:hover:bg-gray-700 ...">ボタン</button>