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