Tailwind CSS は、マークアップ内で直接構成して任意のデザインを構築できるクラスが詰め込まれたユーティリティ優先の CSS フレームワークです。

特徴：

実用性第一:

Tailwind css は、CSS を書かずにカスタム デザインを構築するための低レベル ユーティリティ クラスを提供する、ユーティリティ優先の CSS フレームワークです。このアプローチにより、カスタム CSS を 1 行も記述することなく、完全なカスタム コンポーネント デザインを実装できます。 「クラス名を考えるのにエネルギーを無駄にしているわけではありません。」.

コンテンツのパージ:

これは、運用環境で使用される最終的な CSS ファイルから未使用の CSS クラスを削除するプロセスです。これは、最終的な CSS サイズが小さくなり、保守が容易になり、パフォーマンスが向上する最適化プロセスです。

コマンド:

下線:

underline 
underline-offset-
decoration-- //color for underline
decoration- // size of underline
decoration-

テキスト スタイル

text-- //color of text
text-opacity- //opacity of text
text- //size of text
text- //alignment of text

背景色

bg--

境界線の半径

rounded-

フォント スタイル

font-

イタリック：

italic

可視性

要素を非表示にする:

hidden

表示(非表示の反対):

block

パディング

p-   /* All sides */
px-  /* Horizontal (left and right) */
py-  /* Vertical (top and bottom) */
pl-  /* Left */
pr-  /* Right */
pt-  /* Top */
pb-  /* Bottom */

マージン

m-   /* All sides */
mx-  /* Horizontal (left and right) */
my-  /* Vertical (top and bottom) */
ml-  /* Left */
mr-  /* Right */
mt-  /* Top */
mb-  /* Bottom */

フレックスボックス

flex
flex- // row or column

コンテンツの正当化

justify-

アイテムを整列

items- //start,end,center

レスポンシブ デザイン

sm  /* Small devices */
md  /* Medium devices */
lg  /* Large devices */
xl  /* Extra large devices */

サイズ

h-
w-

ボーダー

border
border-
border-

ホバー状態

hover: