[[Tailwind CSS]]でよく使う表現をまとめたもの。クラス名はすべてではなく、書き方を想起させるために必要な最低限。最新情報は一次文献を参照。
## 文字の大きさ (font-size)
```
text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
```
> [font-size - Typography](https://tailwindcss.com/docs/font-size)
## 文字の太さ (font-weight)
```
font-normal
font-semibold
font-bold
```
> [font-weight - Typography](https://tailwindcss.com/docs/font-weight)
## オーバーした文字の扱い (text-overflow)
```bash
# 表示しきれないところを...で隠す
truncate
text-ellipsis overflow-hidden # 違いは?
# 表示しきれないところをそのまま隠す
text-clip overflow-hidden # text-clipは規定値
```
> [text-overflow - Typography](https://tailwindcss.com/docs/text-overflow)
## 背景色 (background-color)
```
bg-red-300
# alpha値を指定 半透明な黒
bg-black/50
```
> [background-color - Backgrounds](https://tailwindcss.com/docs/background-color)
## 影 (box-shadow)
```bash
# 影の濃さ
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
# 色
shadow-slate-50
```
- https://tailwindcss.com/docs/box-shadow
- https://tailwindcss.com/docs/box-shadow-color
## ボーダー/枠線 (border)
```bash
# 丸み
rounded
rounded-md
rounded-lg
rounded-2xl
rounded-full # 丸
# 太さ
border # 1px
border-4 # 4px
# 色
border-sky-300
# 線の種類
border-solid
border-dashed
border-dotted
```
- https://tailwindcss.com/docs/border-radius
- https://tailwindcss.com/docs/border-width
- https://tailwindcss.com/docs/border-color
- https://tailwindcss.com/docs/border-style
## 中央寄せ
```bash
# spanなど. divには効かない
text-center
# 横方向中央寄せ (水平レイアウト)
flex justify-center
# 縦横方向中央寄せ (水平レイアウト)
flex justify-center items-center
# 横方向中央寄せ (垂直レイアウト)
flex flex-col items-center
# 画面中央
flex flex-col justify-center items-center w-screen h-screen
grid place-items-center
```
- https://tailwindcss.com/docs/text-align
- https://tailwindcss.com/docs/flex-direction
- https://tailwindcss.com/docs/justify-content
- https://tailwindcss.com/docs/align-items
## 要素同士の間を開ける
### flexboxの場合 (gap)
```
gap-4
gap-x-4
gap-y-4
```
> [gap - Flexbox & Grid](https://tailwindcss.com/docs/gap)
### flexbox以外の場合 (space)
```bash
# 水平方向
space-x-4
# 垂直方向
space-y-4
```
> [margin - Spacing](https://tailwindcss.com/docs/space)
## サイズを正方形にする
```
aspect-square
```
> [aspect-ratio - Layout](https://tailwindcss.com/docs/aspect-ratio)
## オーバーレイのように画面全域表示
```bash
fixed inset-0
```
- https://tailwindcss.com/docs/top-right-bottom-left
- https://tailwindcss.com/docs/position
> [!caution]
> `absolute inset-0` はスクロールで外れるので注意
## 入りきらない文字を...で省略する
```bash
truncate
```
> [text-overflow - Typography](https://tailwindcss.com/docs/text-overflow#truncate)
## アニメーション
```bash
transition # defaultはduration-150
transition duration-500
```
- https://tailwindcss.com/docs/transition-property
- https://tailwindcss.com/docs/transition-duration
> [!note]
> `transition-all` はパフォーマンスの観点から不要なら使わない方がいいらしい
## ボタンのhoverアニメーション
```bash
hover:bg-opacity-75 transition duration-500
```
- https://tailwindcss.com/docs/hover-focus-and-other-states
- https://tailwindcss.com/docs/upgrade-guide#new-opacity-modifier-syntax
- https://tailwindcss.com/docs/transition-property
- https://tailwindcss.com/docs/transition-duration
## スクロールしてもヘッダを固定
```bash
sticky top-0 z-10
```
> [position - Layout](https://tailwindcss.com/docs/position#sticky-positioning-elements)
> [!info]
> `z-10` は固定ヘッダの下をスクロールされるコンテンツより[[z-index]]が高ければなんでもOK。
## レスポンシブデザイン
[[ブレークポイントプレフィックス (Tailwind CSS)|ブレークポイントプレフィックス]]を参照。
## `w-` `h-` `m-` `p-` などで使えるトークンの定義
`style.css` で `--spaceing-...` を定義する。
```css
@theme inline {
--spacing-header: var(--header-height);
}
:root {
--header-height: 4rem;
}
```
利用例。
```html
<div class="p-header"></div>
```
> [Theme variables - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/theme#theme-variable-namespaces)
## 親要素をhoverしたら特定の子要素のみclassを適応
> [[親要素をホバーしたら特定の子要素のみclassを適応 (Tailwind CSS)|親要素をホバーしたら特定の子要素のみclassを適応]]
## ヘッダ固定のテーブル
> [[Tailwind CSSでヘッダ固定のテーブル]]
## 用途不明瞭
`flex-none` や `min-h-0` をAIが入れてくることがあるが、動作の裏はとれていない。