文字装飾
フォントファミリー
font-sans
tailwindのデフォルトのフォントファミリーになります。
font-serif
フォーマルな印象を与えます。
font-mono
等幅フォントです。
オリジナルフォント
オリジナルフォントを適用したい場合は以下のようにします。
config
|
1 2 3 4 5 6 7 |
theme: { extend: { fontFamily: { 名前: ["self"], }, }, }, |
html
|
1 |
font-名前 |
太さ
9段階あります。（日本語だと漢字、カタカナ、ひらがななどがあって大変です。）
太字
font-bold
テキストサイズ変更
text-4xl
オリジナルフォント
例えば公式にないオリジナルの「10xl」というフォントを追加したい場合などは以下のように指定します。
|
1 2 3 4 5 6 |
theme: { extend: { fontSize: { "10xl": "9rem", }, }, |
色の変更
text-red-700(色の濃さ、数値が低ければ薄くなる。)
リスト
リストスタイル
list-decimal
リストの場所
デフォルトは「list-outside」になっています。基本的に実務ではinsideの方が使うことが多いです。
内側に入れる
|
1 |
list-inside |
ブロック装飾
共通
remを使う場合
数値指定は、4の倍数を使うと綺麗に収まるらしいです。4は1remを表し1文字分という意味と同等になります。なので例えば、16なら4rem（4文字分）になります。
%を使いたい場合
「1/2(50%)」や、「1/4(25%)」などと指定します。
マージン
m-8：margin:8となる。
マージントップ
mt-4
パディング
p-8：padding:8となる。
ボーダー
border
太さ
border-8
色
border-blue-${濃さ}
線を丸める（border-radius)
rounded
devide
box同士の中間に線を引きたいときに使う。
ring
ボックスモデルの外側に線を引く機能です。最近はよく使われています。（Instagramなども使ってます。）
背景色
bg-gray-200
シャドウ
shadow-lg
この記事へのコメントはありません。