tailwindcss公式の雑メモ

Padding

class名	説明
p(t\|r\|b\|l)-{数字}	t(上), r(右), b(下), l(左)方向のpadding
px-{数字}	左右のpadding
py-{数字}	上下のpadding
p-{数字}	上下左右のpadding
hover:py-8	hoverしたとき`py-8`を適用

class名	font-size	line-height
text-xs	0.75rem	1rem
text-sm	0.875.rem	1.25rem
text-base	1rem	1.5rem
text-lg	1.125rem	1.75rem
text-xl	1.25rem	1.75rem
text-2xl	1.5rem	2.rem
text-3xl	1.875rem	2.25rem
text-4xl	2.25rem	2.5rem
text-5xl	3rem	1
text-6xl	3.75rem	1
text-7xl	4.5rem	1
text-8xl	6rem	1
text-9xl	8rem	1

Font Weight

class名	font-weight
font-thin	100
font-extralight	200
font-light	300
font-normal	400
font-medium	500
font-semibold	600
font-bold	700
font-extrabold	800
font-black	900

Margin

class名	説明
m(t\|r\|b\|l)-{数字}	t(上), r(右), b(下), l(左)方向のmargin
mx-{数字}	左右のmargin
my-{数字}	上下のmargin
mp-{数字}	上下左右のmargin

Text Alignment

class名	text-align
text-left	left
text-center	center
text-right	right
text-justify	justify

Algin Items

|class名|Properties| |---|---|---| |items-start| align-items:flex-start;|配置コンテナの先頭側の端に寄せられる |items-end|align-items: flex-end;|配置コンテナの末尾側の端に寄せられる |items-center|align-items: center;|フレックスアイテムのマージンボックスは、交差軸上の中央に配置される。アイテムのcross-sizeがフレックスコンテナより大きい場合は、両方向へ均等にはみ出す |items-baseline|align-items: baseline;| |items-stretch|align-items: stretch;|アイテムのマージンボックスのcross-sizeが、幅や高さの制約の範囲内でラインと同じになるように拡張される

<div class="flex items-stretch">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">02</div>
</div>

TODO: items-startは寄せられるとは書いてあるものの、実例ではその挙動がわからなかったので確認

Space Between

小要素間のスペースを制御するためのユーティリティ

space-{x|y}-{amount}

<div calss="flex space-x-4"
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div calss="flex flex-col space-y-4"
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Text Color

色の指定、省略

class名	説明
text-{}	textの色指定
bg-{}	背景の色指定
ring-{}	アウトラインリングの色指定

Border Radius

角の丸み指定、省略

rounded-{}
- rounded-none
- rounded-sm
- rounded-md
- rounded
- etc ...

Border Width

枠線の太さ

border-{}

サンプル

border-b-2...下に2px border-blue-500...2pxにblue-500の色付け

Top / Right / Bottom / Left

位置決めされた要素の配置を制御する。リンク参照。形式は、{top|right|bottom|left|inset}-0の形。insetは、top,right,bottom,leftの一括指定を示す項目リンクの画像をみつつ、クラスが推測できるようになるといいかもしれない

left-0 top-0とみたら、左から0の上から0の座標と読み替えると良い

<div calss="relative h-32 w-32" ...>
  <div class="abusolute left-0 top-0 h-16 w-16">01</div>
</div>

// `inset-x-0`でright:0;left:0を指定

<div calss="relative h-32 w-32" ...>
  <div calss="absolute inset-x-0 top-0 h-16>"02</div>
</div>

<div calss="relative h-32 w-32" ...>
  // ↓サイズ指定はいらいない(?)
  <div class="abusolute inset-0">05</div>
</div>

Ring Width

ボックスシャドウを使ったアウトラインリング

ring-{}
- ring-0
- ring-1
- ring-2
- ring

Responsive Design

sm:だと、このブレークポイントより上の..という意味を指す

BreakPoint prefix	Minimum width	CSS
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

以下の例の場合

接頭辞なしのtext-center -> モバイル適用
sm:text-left -> smより大きい場合適用

<div class="text-center sm:text-left" />

上記のような接頭辞のないユーティリティをモバイルのターゲットにして、より大きなブレークポイントで上書きする書き方が良いみたい。

Sample

接頭辞なしは、モバイル適用と意識しておくとレスポンシブなtailwindcssを読み解くことができそう

<div class="sm:hidden">
 // モバイルより大きい場合、hidden
<div>
<div class="hidden sm:block">
 // モバイルでdisplay:hidden
</div>

Handling Hover, Focus, and Other States

hoverしたときに、bg-sky-700に状態変化する

<button class="bg-sky-600 hover:bg-sky-700">
  Save chages
</button>

Hover, focus, and active

基礎的な前提

擬似クラスの確認

オプション	説明
:link	リンクのデフォルトの状態
:visted	既にクリックされているリンクの状態
:hover	マウスをリンクの上に置いたときの状態
:active	アクティブがされた状態
:focus	タッチデバイスでタップした時や、キーボードのtabキーで移動した時

サンプル

outline-none

<button class="bg-violet-500 hover:bg-violet-400 active:bg-violet-600 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>

要件

hoverすると、少し暗くなる
押下すると枠線強調表示

<button
  type="button"
  className="py-2.5 px-5 mb-2 text-sm font-medium text-center text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700 rounded-full focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-900"
>
  Purple
</button>

オプション名	解説
py-2.5	上下padding2.5
px-5	左右padding5
mb-2	下margin2
text-sm	font-size指定
font-medium	font-weight指定
text-center	text-alignを中心へ
text-white	text色指定
bg-purple-700	背景色を指定
hover:bg-purple-800	ホバーしたら、背景色をpurple-800へ
dark:bg-purple-600	ダークモードのときの背景色
dark:hover:bg-purple-700	ダークモードかつホバーしたときの背景色
rounded-full	border-radius: 9999px;指定
focus:ring-4	アウトラインリング
focus:ring-purple-300	アウトラインリングの色指定
dark:focus:ring-purple-900	ダークモードのアウトラインリングの色指定

Dark Mode

以下のようにdarkvariantを利用する

dark:bg-slate-900

FontFamily

module.exports = {
  content: ['./src/index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['sans-serif'],
        'relics': ['Times New Roman', 'MS PGothic'],
        'ui': ['system-ui', '-apple-system']
      }
    }
  },
  plugins: [],
};

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ['./src/index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Noto Sans JP", ...defaultTheme.fontFamily.sans],
      },
    }
  },
  plugins: [],
};

Position

staticで基準の領域を示し、abusoluteで相対的なdivを配置する例

<div class="static ...">
  <p>Static parent</p>
  <div class="abusolute bottom-0 left-0 ...">
    <p>Abusolute child</p>
  </div>
  </div>
</div>J

Flex

クラス名	Properties	説明
flex		要素横並びにフレックコンテナを作るクラス。flexコンテナ要素につけやつ
flex-1	flex: 1 1 0%	フレックスアイテムは初期サイズを無視して、必要に応じて伸縮する
flex-auto	flex: 1 1 auto)	flex-1より初期サイズを考慮して、flexコンテナが伸縮する
flex-initial	flex: 0 1 auto)	flexコンテナに合うように伸縮する
flex-none	flex: none,flex 0 0 auto	width, hight固定。指定されいる要素は伸縮しない

例

<div class="flex">
  <div calss="flex-none"
</div>

参考

Pointer Events

class	Properties	説明
pointer-events-none	pointer-events:none;	マウスイベント発生しない。小要素にpointer-events:autoが設定された場合、小要素のマウスイベントは発生
pointer-events-auto	pointer-events:auto;	通常の動作

Transitions & Animation

Transition duration

duration-{amount}という記法。CSSの遷移の期間を制御するユーティリティ。大きいほど遅くなる。(例えばボタンをホバーしたらボタンが大きくなる。大きくなるまでの時間のことを指す。)

Transition Timing Function

クラス名	Properties	説明
ease-liner	transition-timing-function: linear;	等速(線形に動く)
ease-in	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);	動き出しゆっくり、最後に早く
ease-out	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);	動き出し高速、最後に減速
ease-in-out	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);	動き出し、最後がゆっくりで中盤は加速

速度感のイメージをつかみたい場合は本リンクを参照

例

<button class="transition duration-150 ease-in-out">A</button>

transformとtransition

プロパティ	解説
transition	始点と終点のアニメーションを変化さenterせるプロパティ
transform	x,y座標を利用移動(translate)、回転(rotate)、拡大縮小(scale)などの動きをつけラエル

サンプル解説

button

観点	例
テキストサイズ	text-sm
フォントサイズ	font-medium
テキストカラー	text-indigo-600
テキストカラー(hover)	hover:text-indigo-500
バックグラウンドカラー	bg-white
ボタンの丸み	rounded-md
フォーカスしたときの枠幅	focus:ring-2
フォーカスしたときの枠色	focus:ring-indigo-500
枠をボタンの外側にする場合	focus:ring-offset-2
Chromeなどで、テキストエリアのフォーカス時に自動付加するピンク色の枠を消す	focus:outline-none(※1)

※1 input type="search"でも、本オプションはデフォルトで利用するべき

Header

以下のようなヘッダーを作る時

flex-colで以下のように全体的に領域を切る

[header]
[content]
[footer]

|Logo|SearchBox menu1 menu2 menu3|BellIcon|

Padding

FontSize

Font Weight

Margin

Text Alignment

Algin Items

Space Between

Text Color

Border Radius

Border Width

サンプル

Top / Right / Bottom / Left

Ring Width

Responsive Design

Sample

Handling Hover, Focus, and Other States

Hover, focus, and active

基礎的な前提

サンプル

Dark Mode

FontFamily

Position

Flex

Pointer Events

Transitions & Animation

Transition duration

Transition Timing Function

例

transformとtransition

サンプル解説

button

Header

eslint-plugin-tailwindcss

ソート規則

疑問点