ホームページ > ウェブフロントエンド > CSSチュートリアル > Tailwind コマンドのチートシート

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

王林
リリース: 2024-07-17 01:23:10
オリジナル
1180 人が閲覧しました

Tailwind Commands Cheat Sheet

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

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート