Tailwind CSS は、マークアップ内で直接構成して任意のデザインを構築できるクラスが詰め込まれたユーティリティ優先の CSS フレームワークです。
Tailwind css は、CSS を書かずにカスタム デザインを構築するための低レベル ユーティリティ クラスを提供する、ユーティリティ優先の CSS フレームワークです。このアプローチにより、カスタム CSS を 1 行も記述することなく、完全なカスタム コンポーネント デザインを実装できます。 「クラス名を考えるのにエネルギーを無駄にしているわけではありません。」.
これは、本番環境で使用される最終的な CSS ファイルから未使用の CSS クラスを削除するプロセスです。これは、最終的な CSS サイズが小さくなり、保守が容易になり、パフォーマンスが向上する最適化プロセスです。
下線:
underline underline-offset-<size> decoration-<color>-<shade> //color for underline decoration-<thickness> // size of underline decoration-<style> // wavy, double
テキストのスタイル
text-<color>-<shade> //color of text text-opacity-<shade> //opacity of text text-<size> //size of text text-<alignment> //alignment of text
背景色
bg-<color>-<shade>
境界線の半径
rounded-<size>
フォントのスタイル
font-<style> //mono, serif, sans font-bold font-thin
斜体:
italic
要素を非表示にする:
hidden
表示 (非表示の反対):
block
パディング
p-<size> /* All sides */ px-<size> /* Horizontal (left and right) */ py-<size> /* Vertical (top and bottom) */ pl-<size> /* Left */ pr-<size> /* Right */ pt-<size> /* Top */ pb-<size> /* Bottom */
マージン
m-<size> /* All sides */ mx-<size> /* Horizontal (left and right) */ my-<size> /* Vertical (top and bottom) */ ml-<size> /* Left */ mr-<size> /* Right */ mt-<size> /* Top */ mb-<size> /* Bottom */
フレックスボックス
flex flex-<direction> // row or column
コンテンツを正当化する
justify-<option>
アイテムを整列させる
items-<option> //start,end,center
レスポンシブデザイン
sm /* Small devices */ md /* Medium devices */ lg /* Large devices */ xl /* Extra large devices */
サイズ
h-<size> w-<size>
ボーダー
border border-<size> border-<color>
ホバー状態
hover:<utility>
以上がTailwind コマンドのチートシートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。