Tailwind コマンドのチートシート

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 サイトの他の関連記事を参照してください。