Tailwind入門

# 1. やりたいこと


NextやRemixで標準対応してきているTailwindの使いこなせるようになりたい


# 2. Tailwindについて


## 2-1. CSSの選択肢


CSSを書く方法として以下の4つがあるようです


1. CSSをモリモリ書く
2. ユーティリティファーストで書く（Tailwind CSS, Windi CSS）
3. CSSフレームワークで書く（Bootstrap）
4. コンポーネントライブラリを使う（Chakra UI, Mantine UI, MUI）


上記の数字が大きいものほど簡単で機能性が高くなる一方で自由度は低くなっていきます


npmダウンロード数を見るとTailwindが圧倒的な人気にあるようです。NextやRemixも標準対応してドキュメントにも記載がありますし、多くの開発ケースで第1選択として挙がっているようですから使えるようになっておいて損はなさそうです


## 2-2. Tailwindのメリットデメリット


個人的な見解ですが以下のように思います


## 良いところ


・class名を考えなくて良いのはストレスをかなり低減する
・htmlとCSSを別々に書くのはストレスが大きかったことに気付く
・ブラウザ別設定を書かなくて良いのはすごく楽
・CSSリセットがかかるのも嬉しい
・どの要素にスタイルをあてようとしているか分かりやすい
・デザイン自由度は素のCSSと同等
・デフォルトの条件から選ぶと文字サイズなどを揃えやすい


## イマイチなところ


・スタイルをたくさんあてるとhtmlが見づらくなる
・トランスパイルしないと表示が遅くなる
・スタイルを共通して使いまわすにはTailwind Variantsなどの追加ライブラリがほしくなる


# 3. 導入


## 3-1. 選択肢


公式ドキュメントに分かりやすい説明があります
https://tailwindcss.com/docs/installation/using-vite


各種フレームワークについても個別に説明があります
https://tailwindcss.com/docs/installation/framework-guides


Tailwindはhtmlタグにデザイン指示を羅列するような書き方をしますので、トランスパイラを前提としたフレームワークであると思います。公式ドキュメントにはVite, PostCSS, Tailwind CLIのほか、NextやReact Routerなどのフレームワークから使う方法が解説されていますが、今回はReact Routerでやってみようと思います。CDNからJavascriptコードを取得して実行すること自体はできますが普通はやらないと思います


## 3-2. React Routerの場合


公式に手順があります
https://tailwindcss.com/docs/installation/framework-guides/react-router


### プロジェクトを作成する


```terminal:terminal
npx create-react-router@latest my-project
cd my-project
```


### Tailwindをインストールする


```terminal:terminal
npm install tailwindcss @tailwindcss/vite
```


### vite.config.ts


react-router v.7.4.1だとデフォルトで以下のようにtailwindcssが設定されています


```typescript:vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
});
```


### app/app.css


Tailwindを使えるようにapp.cssでimportします
app.cssに元々書かれている@<hoge>import "tailwindcss";</hoge>がTailwindをimportしてくれます


```sass:/app/app.css
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html,
body {
  @apply bg-white dark:bg-gray-950;

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;
  }
}
```


### 開発用サーバーを起動


```terminal:terminal
npm run dev
```


### Tailwindでスタイルを適用する


あとは適当な要素のclassNameにTailwindのスタイルを書いていけばスタイルを適用できます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/e3961432-3904-448d-abbd-da4d7f4b75b5.png" width=70%>


## 3-3. 試すだけの場合


動作を試すだけであれば公式が提供しているTailwind Playで確認することができます
https://play.tailwindcss.com/


# 4. 書き方


通常React Routerの場合、ファイルを分けてroutingを入れて書くと思いますが、簡単の為にすべてhome.tsxのHome()に書いてしまおうと思います


## 4-1. 予備知識


### CSSリセットについて


ブラウザのデフォルトCSSスタイルをリセットする仕組みとしてPreflightという機能が用意されています。これにより、h1の文字サイズが違ったり、ulのマージンが違ったりするのを気付かずにそのまま開発してしまって違うブラウザで全然違う見た目になってしまうのを防げます。TailwindをCSSファイルでimportすると自動で適用されます
https://tailwindcss.com/docs/preflight


リセットCSSされるデザインはmodern-normalizeに準拠しているようです
https://github.com/sindresorhus/modern-normalize


## 4-2. 基本編


TailwindはclassNameにスペース区切りでスタイル指定を書いておくと、トランスパイラがCSSを書き出してくれる、という仕組みです。フロントエンドの人はいろんなフレームワークを使うことが多いので、他のフレームワークでも書き方がほとんど変わらないのはありがたいです


### 4-2-1. 1つの要素に対して適用する


以下の場合はフォントサイズを大きく（text-3xl）の太字（font-bold）の下線付き（underline）にする、という指定になります


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/e3961432-3904-448d-abbd-da4d7f4b75b5.png" width=70%>


### 4-2-2. 入れ子構造の要素に適用する


入れ子構造にすると内側にあるすべての要素に適用されます
同じ対象への指定が重複すると、内側の要素の指定の方が優先されます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-amber-500">
      <h1 className="text-5xl font-bold underline">
        Hello world!
      </h1>
      <div className="text-3xl text-blue-500">
        ほげほげ
      </div>
    </div>
  )
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/2f0a5343-cc49-4f97-849b-cb901cb05b0e.png" width=50%>


### 4-2-3. 条件付き適用


#### hover


```react:/app/routes/home.tsx
<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>
```


#### disabled


```react:/app/routes/home.tsx
<button class="bg-indigo-500  disabled:opacity-50 ...">Save changes</button>
```


## 4-3. 文字デザイン


### 4-3-1. 文字フォント


#### 標準で使えるフォント


デフォルトで3種類選べます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-4xl m-8">
      <div className="font-sans">
        font-sans
      </div>
      <div className="font-serif">
        font-serif
      </div>
      <div className="font-mono">
        font-mono
      </div>
    </div>
  )
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/95298305-ca3e-46f0-82ff-9b48a12d171f.png)


#### 追加フォント


app.cssに書いておいて呼び出すことで、追加のフォントを使用することができます


```css:/app/app.css
@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
               "Noto Color Emoji";
  --font-roboto: "Roboto", sans-serif; 
}
```


```react:/app/routes/home.tsxに追加
<div className="font-roboto">
  font-roboto
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/14cb840e-f00a-4452-a671-adc3c2b6478d.png)


### 4-3-2. 文字サイズ


#### 通常の大小


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-4xl m-8">
      <div className="text-xs">
        text-xs
      </div>
      <div className="text-sm">
        text-sm
      </div>
      <div className="text-base">
        text-base
      </div>
      <div className="text-lg">
        text-lg
      </div>
      <div className="text-xl">
        text-xl
      </div>
      <div className="text-2xl">
        text-2xl
      </div>
      <div className="text-3xl">
        text-3xl
      </div>
    </div>
  )
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/2fdaf453-ba2c-415e-8642-c938e9c1b88a.png" width=50%>


#### 行間高さを指定する


文字の表示高さを指定できます
文字自体の大きさはそのままなので、高さを増やすと間隔があきます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-4xl m-8">
      <div className="text-base/6">
        text-base/6
      </div>
      <div className="text-base/6">
        text-base/6
      </div>
      <div className="text-base/6">
        text-base/6
      </div>
      <div className="text-base/12">
        text-base/12
      </div>
      <div className="text-base/12">
        text-base/12
      </div>
      <div className="text-base/12">
        text-base/12
      </div>
      <div className="text-base/18">
        text-base/18
      </div>
      <div className="text-base/18">
        text-base/18
      </div>
      <div className="text-base/18">
        text-base/18
      </div>
    </div>
  )
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/dd0b96bd-1bf3-4741-8442-31f07a7a5407.png" width=50%>


### 4-3-3. 文字の色


#### 色名と濃さで指定


選べる色一覧が以下にあります
https://tailwindcss.com/docs/color


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl/8 m-8">
      <div>
        色指定なし
      </div>
      <div className="text-blue-900">
        text-blue-900
      </div>
      <div className="text-blue-700">
        text-blue-700
      </div>
      <div className="text-blue-500">
        text-blue-500
      </div>
      <div className="text-blue-300">
        text-blue-300
      </div>
      <div className="text-blue-100">
        text-blue-100
      </div>
      <div className="text-red-900">
        text-blue-900
      </div>
      <div className="text-red-700">
        text-blue-700
      </div>
      <div className="text-red-500">
        text-blue-500
      </div>
      <div className="text-red-300">
        text-blue-300
      </div>
      <div className="text-red-100">
        text-blue-100
      </div>
    </div>
  )
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/151df1e8-82a5-4620-98fb-4a6960e35f4e.png" width=50%>


#### 透明度を指定


透明度も指定できます
/50だと50%透過です


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl/8 bg-amber-300 m-8">
      <div className="text-blue-700">
        text-blue-700
      </div>
      <div className="text-blue-500">
        text-blue-500
      </div>
      <div className="text-blue-300">
        text-blue-300
      </div>
      <div className="text-blue-100">
        text-blue-100
      </div>
      <div className="text-blue-700/100">
        text-blue-700/100
      </div>
      <div className="text-blue-700/75">
        text-blue-700/100
      </div>
      <div className="text-blue-700/50">
        text-blue-700/100
      </div>
      <div className="text-blue-700/25">
        text-blue-700/100
      </div>

    </div>
  )
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/ae5ef4d8-b5a8-42c9-9967-a6f2294ac015.png)


#### カスタム色を使う


任意の色を登録しておいて使うこともできます



```css:/app/app.css
@theme {
  --color-regal-blue: #243c5a; 
}
```


```react:/app/routes/home.tsxに追加
<p class="text-regal-blue">
  Lorem ipsum dolor sit amet...
</p>
```


### 4-3-4. 文字太さ


font-thinがweight: 100で、以降100刻みで指定できます
https://tailwindcss.com/docs/font-weight


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl/8 m-8">
      <div className="font-thin">
        font-thin
      </div>
      <div className="font-extralight">
        font-extralight
      </div>
      <div className="font-light">
        font-light
      </div>
      <div className="font-normal">
        font-normal
      </div>
      <div className="font-medium">
        font-medium
      </div>
      <div className="font-semibold">
        font-semibold
      </div>
      <div className="font-bold">
        font-bold
      </div>
      <div className="font-extrabold">
        font-extrabold
      </div>
      <div className="font-black">
        font-black
      </div>
    </div>
  )
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f819df01-8b34-44e9-89c7-4ea8e2880f42.png)


### 4-3-4. 文字スタイル


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl/8 m-8">
      <div className="not-italic">
        not-italic
      </div>
      <div className="italic">
        italic
      </div>
      <div className="not-underline">
        not-underline
      </div>
      <div className="underline">
        underline
      </div>
    </div>
  )
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/c6b2ab29-72a6-44b9-9aa9-7c5040cd283e.png)


### 4-3-5. text-align


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl/8 font-bold bg-amber-200 w-1/2 m-8">
      <div className="text-left m-4">
        text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left
      </div>
      <div className="text-center m-4">
        text-center text-center text-center text-center text-center text-center text-center text-center text-center
      </div>
      <div className="text-right m-4">
        text-right text-right text-right text-right text-right text-right text-right text-right text-right text-right text-right 
      </div>
      <p className="text-justify m-4">
        text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify text-justify
      </p>

    </div>
  )
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/bc527e8a-09d5-42b9-bb32-7b11d8b817d6.png)



### 4-3-6. vertical-align


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <>
      <div className="text-3xl font-bold bg-amber-200 w-1/2 h-32 m-8 flex items-start">
        <div className="m-4">
          align-top
        </div>
      </div>

      <div className="text-3xl font-bold bg-amber-200 w-1/2 h-32 m-8 flex items-center">
        <div className="m-4">
          align-middle
        </div>
      </div>

      <div className="text-3xl font-bold bg-amber-200 w-1/2 h-32 m-8 flex items-end">
        <div className="m-4">
          align-bottom
        </div>
      </div>
    </>
  )
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d9bb4cce-7d57-4404-95f8-54e2f8a5dc3f.png)


### 4-3-7. フォントスムーシング


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl/8 m-8">
      <div>
        フォントスムーシングなし
      </div>
      <div className="antialiased">
        フォントスムーシングあり（アンチエイリアス）
      </div>
      <div className="subpixel-antialiased">
        フォントスムーシングあり（サブピクセルアンチエイリアス）
      </div>
    </div>
  )
}
```


## 4-4. 要素の大きさ


公式の解説が以下リンク先にあります
https://tailwindcss.com/docs/width


### 4-4-1. 固定値（spacing × 値 pxで指定）


w-32, h-128のように数値で指定すると、--spacingの値 × 数値 pxの固定値で設定されます
size-64のように書くと縦横を同じ値で指定します


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl font-bold h-svh">
      <div className="bg-amber-200 w-128 h-32 m-4">
        固定値: w-128 h-32
      </div>
      <div className="bg-amber-200 size-64 m-4">
        固定値: size-64
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/03236e53-72a9-4b08-bb5e-bf4f5c942c00.png" width=60%>


--spacingの値を変更したい場合は以下のようにcss内で指定できます


```css:/app/app.cssに追記
@theme {
  --spacing: 1px; 
}
```



### 4-4-2. 固定値（Tailwindのコンテナスケール）


幅についてはxl, lg, md, sm, xsなどのコンテナスケールで指定することができます
w-32, h-128のように数値で指定すると、--spacingの値 × 数値 pxの固定値で設定されます
size-64のように書くと縦横を同じ値で指定します


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl font-bold h-svh">
      <div className="bg-amber-200 w-xl h-16 m-4">
        固定値: w-xl h-16
      </div>
      <div className="bg-amber-200 w-lg h-16 m-4">
        固定値: w-lg h-16
      </div>
      <div className="bg-amber-200 w-md h-16 m-4">
        固定値: w-md h-16
      </div>
      <div className="bg-amber-200 w-sm h-16 m-4">
        固定値: w-sm h-16
      </div>
      <div className="bg-amber-200 w-xs h-16 m-4">
        固定値: w-xs h-16
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/393c8843-aa30-4947-ae82-0081930f1ce7.png" width=60%>


### 4-4-3. 画面幅に合わせる


viewportに合わせる場合は以下のように書きます


```react:ViewPort全体に合わせる
<div className="w-screen h-screen">
```


```react:Large ViewPortに合わせる
<div className="w-lvw h-lvh">
```


```react:Small ViewPortに合わせる
<div className="w-svw h-svh">
```


```react:Dynamic ViewPortに合わせる
<div className="w-dvw h-dvh">
```


### 4-4-4. 割合


親要素に対する比率で指定することもできます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-3xl font-bold h-svh">
      <div className="bg-amber-200 w-1/3 h-1/8 m-4">
        割合: w-1/3 h-1/8
      </div>
      <div className="bg-amber-200 size-1/4 m-4">
        割合: size-1/4
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f87ed6f3-4b62-4a8e-84d0-9a6d3121d85c.png" width=60%>


### 4-4-5. min, max


割合で指定しているときなどの為にmin, maxを指定できます
https://tailwindcss.com/docs/min-width


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="text-2xl font-bold h-svh">
      <div className="bg-amber-200 w-2/5 h-1/4 m-4">
        <div>割合:</div>
        <div>w-1/3 h-1/8</div>
      </div>
      <div className="bg-amber-200 w-2/5 h-1/4 min-w-64 min-h-32 m-4">
        <div>割合:</div>
        <div>w-1/3 h-1/8</div>
        <div>min-w-128 min-h-16</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/19a94592-1621-4776-87eb-1350c0c53536.png" width=60%>


## 4-5. padding, margin


公式のドキュメントは以下にあります
https://tailwindcss.com/docs/padding
https://tailwindcss.com/docs/margin


### 4-5-1. 全体


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="bg-amber-400 text-2xl font-bold h-128 m-4 p-4">
      <div className="bg-amber-200 w-64 h-32">
        <div>m-0 p-0</div>
      </div>
      <div className="bg-amber-200 w-64 h-32 m-4">
        <div>m-4 p-0</div>
      </div>
      <div className="bg-amber-200 w-64 h-32 m-4 p-8">
        <div>m-4 p-8</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/4e1ce2d6-d1e0-466b-804a-dff6430d5d88.png" width=60%>


### 4-5-2. 上下, 左右


```react:上下
<div className="my-4 py-8">
```


```react:左右
<div className="mx-4 px-8">
```


### 4-5-3. 一方向だけ


```react:上
<div className="mt-4 pt-8">
```


```react:下
<div className="mb-4 pb-8">
```


```react:左
<div className="ml-4 pl-8">
```


```react:右
<div className="mr-4 pr-8">
```


## 4-6. FLEXBOX


### 4-6-1. flex


公式ドキュメント
https://tailwindcss.com/docs/flex-basis


#### 比率を数値で指定する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex bg-amber-400 text-2xl font-bold w-3xl h-128 m-4 p-4">
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-1 m-4</div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-1 m-4</div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-1 m-4</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/da53806e-cd74-4803-a085-8754bea5e55a.png" width=60%>


#### 比率を分数で指定する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex bg-amber-400 text-2xl font-bold w-3xl h-128 m-4 p-4">
      <div className="flex-1/2 bg-amber-200 m-4">
        <div>flex-1/2</div>
      </div>
      <div className="flex-1/4 bg-amber-200 m-4">
        <div>flex-1/4</div>
      </div>
      <div className="flex-1/4 bg-amber-200 m-4">
        <div>flex-1/4</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/9424637d-7a06-481f-8ec9-390a68433897.png" width=60%>


#### 比率をコンテナスケールで指定する


xl, lg, md, sm, xsなどのコンテナスケールで指定することもできます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex bg-amber-400 text-2xl font-bold w-3xl h-128 m-4 p-4">
      <div className="basis-lg bg-amber-200 m-4">
        <div>flex-lg</div>
      </div>
      <div className="basis-xs bg-amber-200 m-4">
        <div>flex-xs</div>
      </div>
      <div className="basis-xs bg-amber-200 m-4">
        <div>flex-xs</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f84832ca-d9ee-408a-9a65-a52dbb19d927.png" width=60%>


### 4-6-2. 方向を指定する


#### 縦方向


縦方向にflexboxを並べる場合はflex-colを追加します


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-col bg-amber-400 text-2xl font-bold w-3xl h-128 m-4 p-4">
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-lg</div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-xs</div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-xs</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/632fd14c-edaf-4ddf-b6ae-4636442d3662.png" width=60%>


#### 横方向


flex-rowだと横方向になります



```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row bg-amber-400 text-2xl font-bold w-3xl h-128 m-4 p-4">
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-1</div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-1</div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div>flex-1</div>
      </div>      
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/da53806e-cd74-4803-a085-8754bea5e55a.png" width=60%>


#### 逆向き


flex-col-reverse, flex-row-reverseだと横方向になります



```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row-reverse bg-amber-400 text-2xl font-bold w-3xl h-128 m-4 p-4">
      <div className="flex-1 bg-amber-200 m-4">
        <div className="flex flex-col-reverse h-full">
          <div className="flex-1 bg-amber-50 m-4">1-1</div>
          <div className="flex-1 bg-amber-50 m-4">1-2</div>
          <div className="flex-1 bg-amber-50 m-4">1-3</div>
        </div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div className="m-4">2</div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div className="m-4">3</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b29a9d20-3e5e-48dd-b723-53e649e39de0.png" width=60%>


### 4-6-3. 伸縮の有無


flex要素は親要素の伸縮に合わせて伸縮しますが、伸縮しないようにすることもできます
以下の3種類の挙動から選択できます


・flex-1のように比率を指定していると比率を維持しながら伸縮する
・flex-initialを指定すると縮むけど伸びない
・flex-noneを指定すると伸縮しない


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex bg-amber-400 text-2xl font-bold w-3/4 h-128 m-4 p-4">
      <div className="w-16 flex-none bg-amber-200 m-4">
        <div className="m-4">1</div>
      </div>
      <div className="w-48 bg-amber-200 m-4">
        <div className="m-4">2</div>
      </div>
      <div className="flex-1 bg-amber-200 m-4">
        <div className="m-4">3</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/8d9168f6-c5e3-497b-8bda-12e0e900eaa3.png" width=60%>


### 4-7-4. items align


要素を上寄せ、下寄せ、中央揃えすることができます
https://tailwindcss.com/docs/align-items


#### 全部一律で指定する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex items-center bg-amber-400 text-2xl font-bold w-3/4 h-128 m-4 p-4">
      <div className="flex-1 py-12 bg-amber-200 m-4">
        <div className="m-4">1</div>
      </div>
      <div className="flex-1 py-4 bg-amber-200 m-4">
        <div className="m-4">2</div>
      </div>
      <div className="flex-1 py-24 bg-amber-200 m-4">
        <div className="m-4">3</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/a4504b88-6ce7-4a7f-bf42-01e4b932a1b1.png" width=60%>


#### 個別で1つずつ指定する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex bg-amber-400 text-2xl font-bold w-3/4 h-128 m-4 p-4">
      <div className="flex-1 self-center py-12 bg-amber-200 m-4">
        <div className="m-4">1</div>
      </div>
      <div className="flex-1 self-start py-4 bg-amber-200 m-4">
        <div className="m-4">2</div>
      </div>
      <div className="flex-1 self-end py-18 bg-amber-200 m-4">
        <div className="m-4">3</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5b100e8b-4480-4c64-a4ab-2536a7a425d1.png" width=60%>


### 4-7-6. justify


要素自体の幅に合わせて片側に寄せたり、筋等幅で配置したりできます


#### 右寄せ


横配置の場合
・justify-startで左寄せ
・justify-centerで中央寄せ
・justify-endで右寄せ
になります


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="bg-amber-400 text-2xl font-bold w-1/2 h-64 m-4 p-4">
      <div className="flex justify-end gap-4">
        <div className="bg-amber-200">1: aaa</div>
        <div className="bg-amber-200">2: bbbbb</div>        
        <div className="bg-amber-200">3: cc</div>
        <div className="bg-amber-200">4: dddddddd</div>
        <div className="bg-amber-200">5: e</div>
      </div>      
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/8a9e59a6-6d4d-4c0b-b3c5-c14282e6d7a1.png" width=60%>


#### 均等配置


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="bg-amber-400 text-2xl font-bold w-1/2 h-64 m-4 p-4">
      <div className="flex justify-between gap-4">
        <div className="bg-amber-200">1: aaa</div>
        <div className="bg-amber-200">2: bbbbb</div>        
        <div className="bg-amber-200">3: cc</div>
        <div className="bg-amber-200">4: dddddddd</div>
        <div className="bg-amber-200">5: e</div>
      </div>      
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d89a5691-a7c5-4a53-b1a9-c1b4e2ef5889.png" width=60%>


## 4-7. GRID


### 4-7-1. テンプレート配置


#### 左から右へ


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 gap-4 bg-amber-400 text-2xl font-bold w-3/5 h-128 m-4 p-4">
      <div className="bg-amber-200">01</div>
      <div className="bg-amber-200">02</div>
      <div className="bg-amber-200">03</div>
      <div className="bg-amber-200">04</div>
      <div className="bg-amber-200">05</div>
      <div className="bg-amber-200">06</div>
      <div className="bg-amber-200">07</div>
      <div className="bg-amber-200">08</div>
      <div className="bg-amber-200">09</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/c47bcf48-82bb-4eb7-a775-bdec2f979b27.png" width=60%>


#### 上から下へ


grid-flow-colで指定より多い要素が来たら次の列に割り当てるように指示、grid-rows-4で要素4つまで行方向に並べるように指示のようにすると上から下に並べていくことができます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-flow-col grid-rows-4 gap-4 bg-amber-400 text-2xl font-bold w-3/5 h-128 m-4 p-4">
      <div className="bg-amber-200">01</div>
      <div className="bg-amber-200">02</div>
      <div className="bg-amber-200">03</div>
      <div className="bg-amber-200">04</div>
      <div className="bg-amber-200">05</div>
      <div className="bg-amber-200">06</div>
      <div className="bg-amber-200">07</div>
      <div className="bg-amber-200">08</div>
      <div className="bg-amber-200">09</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d3aaf641-b846-4c2a-8205-b21683e1121f.png" width=60%>




### 4-7-2. 幅を変える


col-span-2とすると横に2コマ分、row-span-3とすると縦に3コマ分表示できます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 gap-4 bg-amber-400 text-2xl font-bold w-3/5 h-128 m-4 p-4">
      <div className="bg-amber-200">01</div>
      <div className="bg-amber-200 col-span-2">02</div>
      <div className="bg-amber-200">03</div>
      <div className="bg-amber-200 col-span-3">04</div>
      <div className="bg-amber-200">05</div>
      <div className="bg-amber-200">06</div>
      <div className="bg-amber-200">07</div>
      <div className="bg-amber-200 col-span-2">08</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/7d5ff5cd-d7b1-458f-8f20-b72ae9d93e22.png" width=60%>


### 4-7-3. 隙間を空ける


col-startやcol-endを指定すれば隙間を空けて配置できます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 gap-4 bg-amber-400 text-2xl font-bold w-3/5 h-128 m-4 p-4">
      <div className="bg-amber-200">01</div>
      <div className="bg-amber-200 col-start-3 col-span-2">02</div>
      <div className="bg-amber-200 col-start-2 col-span-2">03</div>
      <div className="bg-amber-200 col-start-1">04</div>
      <div className="bg-amber-200 col-span-2 col-end-5">05</div>
      <div className="bg-amber-200 col-start-4">06</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f5e0c391-f66d-4079-a4d5-ca24eddd446d.png" width=60%>


### 4-7-4. 要素全体の配置


#### place-content


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-2 place-content-start justify-items-center gap-4 bg-amber-400 text-2xl font-bold w-3/5 h-128 m-4 p-4">
      <div className="bg-amber-200 px-8 py-4">01</div>
      <div className="bg-amber-200 px-8 py-4">02</div>
      <div className="bg-amber-200 px-8 py-4">03</div>
      <div className="bg-amber-200 px-8 py-4">04</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/6e0a0b07-435a-4665-86d7-a3fcc052b814.png" width=60%>


#### content


content-start, content-endなどで要素全体を片側に寄せることができます
https://tailwindcss.com/docs/align-content


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 content-end gap-4 bg-amber-400 text-2xl font-bold w-2/5 h-64 m-4 p-4">
      <div className="justify-self-start bg-amber-200">01</div>
      <div className="justify-self-center bg-amber-200">02</div>
      <div className="justify-self-end bg-amber-200">03</div>
      <div className="justify-self-start bg-amber-200">04</div>
      <div className="justify-self-center bg-amber-200">05</div>
      <div className="justify-self-end bg-amber-200">06</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/7cced9ef-c2b8-45b8-9f7c-eb2f4db59a36.png" width=60%>


### 4-7-5. justify-items


要素の幅に合わせたサイズで表示するとき、左寄せ、中央揃え、右寄せで表示することができます


#### 全部一律で指定する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 justify-items-end gap-4 bg-amber-400 text-2xl font-bold w-2/5 h-64 m-4 p-4">
      <div className="bg-amber-200">01</div>
      <div className="bg-amber-200">02</div>
      <div className="bg-amber-200">03</div>
      <div className="bg-amber-200">04</div>
      <div className="bg-amber-200">05</div>
      <div className="bg-amber-200">06</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/9bc55e93-92e7-4f09-862e-7b8d41765cda.png" width=70%>


#### 個別で1つずつ指定する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 gap-4 bg-amber-400 text-2xl font-bold w-2/5 h-64 m-4 p-4">
      <div className="justify-self-start bg-amber-200">01</div>
      <div className="justify-self-center bg-amber-200">02</div>
      <div className="justify-self-end bg-amber-200">03</div>
      <div className="justify-self-start bg-amber-200">04</div>
      <div className="justify-self-center bg-amber-200">05</div>
      <div className="justify-self-end bg-amber-200">06</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/41468a95-2ef9-4e48-a62a-a62abd7976fc.png" width=70%>


### 4-7-6. place-items


#### 全部一律で指定する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 place-items-end gap-4 bg-amber-400 text-2xl font-bold w-2/5 h-64 m-4 p-4">
      <div className="bg-amber-200">01</div>
      <div className="bg-amber-200">02</div>
      <div className="bg-amber-200">03</div>
      <div className="bg-amber-200">04</div>
      <div className="bg-amber-200">05</div>
      <div className="bg-amber-200">06</div>
    </div>
  );
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/ebf34305-c8d2-4ee0-a912-dc9a11811a26.png" width=70%>


#### 個別で1つずつ指定する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 gap-4 bg-amber-400 text-2xl font-bold w-2/5 h-64 m-4 p-4">
      <div className="place-self-start bg-amber-200">01</div>
      <div className="place-self-center bg-amber-200">02</div>
      <div className="place-self-end bg-amber-200">03</div>
      <div className="place-self-end bg-amber-200">04</div>
      <div className="place-self-center bg-amber-200">05</div>
      <div className="place-self-start bg-amber-200">06</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b7c807d5-8fb3-49ca-be16-a07f73f17de3.png" width=70%>


## 4-8. レイアウト


### 4-8-1. 非表示


#### 存在しなくする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 gap-4 bg-amber-400 text-2xl font-bold w-2/5 h-64 m-4 p-4">
      <div className="bg-amber-200">01</div>
      <div className="bg-amber-200 hidden">02</div>
      <div className="bg-amber-200">03</div>
      <div className="bg-amber-200">04</div>
      <div className="bg-amber-200 hidden">05</div>
      <div className="bg-amber-200">06</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/767fb3ab-bfd7-4db4-a394-c5c66e46a87b.png" width=70%>




#### 非表示にする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 gap-4 bg-amber-400 text-2xl font-bold w-2/5 h-64 m-4 p-4">
      <div className="bg-amber-200">01</div>
      <div className="bg-amber-200 invisible">02</div>
      <div className="bg-amber-200">03</div>
      <div className="bg-amber-200">04</div>
      <div className="bg-amber-200 collapse">05</div>
      <div className="bg-amber-200">06</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/fb877eaa-1588-4cf6-adb8-cd1aaa064a64.png" width=70%>


### 4-8-2. float


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="bg-amber-400 w-128 h-64">
      <div className="float-right bg-amber-200 w-64 h-32 p-8">float-right</div>
      <p className="p-2">hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge</p>
    </div>
  );
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5581b5f3-f908-4545-8f6f-61a069dad9af.png" width=70%>


### 4-8-3. columns


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="columns-3 gap-4 bg-amber-400 text-2xl font-bold w-2/5 h-64 m-4 p-4">
      <div className="bg-amber-200 h-32">01</div>
      <div className="bg-amber-200 my-4">02</div>
      <div className="bg-amber-200 my-4">03</div>
      <div className="bg-amber-200 my-4">04</div>
      <div className="bg-amber-200 my-4">05</div>
      <div className="bg-amber-200 h-20 my-4">06</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/9f0c3f71-01af-4245-acbe-31f07d176df9.png" width=70%>


### 4-8-5. z-index


https://tailwindcss.com/docs/z-index


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="isolate flex justify-center -space-x-3 font-mono text-sm leading-6 font-bold text-white">
      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">01</div>
      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">02</div>
      <div className="-z-10 flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">03</div>
      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">04</div>
      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">05</div>
    </div>  
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d95968dd-7f77-46c6-b02c-5d583f51ead6.png" width=70%>


## 4-9. boarder


### 4-9-1. 角丸


#### 四隅すべてを角丸にする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex items-center m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">rounded-sm</p>
        <div className="size-16 rounded-sm bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-md</p>
        <div className="size-16 rounded-md bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-lg</p>
        <div className="size-16 rounded-lg bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-xl</p>
        <div className="size-16 rounded-xl bg-orange-500 p-4"></div>
      </div>
    </div>
  );
}

```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/e3c40472-dd7d-42fe-bb37-184c70b52596.png" width=70%>


#### 上下左右の2隅を指定して角丸にする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex items-center m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">rounded-sm</p>
        <div className="size-16 rounded-t-2xl bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-md</p>
        <div className="size-16 rounded-b-2xl bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-lg</p>
        <div className="size-16 rounded-r-2xl bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-xl</p>
        <div className="size-16 rounded-l-2xl bg-orange-500 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/c2e62ffe-3711-465f-9ad5-1d8442674492.png" width=70%>


#### 4隅の1つを指定して角丸にする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex items-center m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">rounded-sm</p>
        <div className="size-16 rounded-tl-2xl bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-md</p>
        <div className="size-16 rounded-tr-2xl bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-lg</p>
        <div className="size-16 rounded-bl-2xl bg-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">rounded-xl</p>
        <div className="size-16 rounded-br-2xl bg-orange-500 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/039b0362-a451-4fcf-ba43-1a0d797d6fc1.png" width=70%>


#### 完全に角丸する


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="m-8">
      <button className="rounded-full bg-blue-900 px-4 py-2 text-xl font-bold text-white">Save Changes</button>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/41845958-bb3b-4d4d-a73b-fa5283bc3590.png" width=40%>


#### 角丸を無効にする


親要素で角丸されていて、特定要素以下を無効にしたいときはrounded-noneで指定できます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="m-8 rounded-full">
      <button className="rounded-none bg-blue-900 px-4 py-2 text-xl font-bold text-white">Save Changes</button>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/44275a72-7dd1-4353-a975-e1b5e10bc847.png" width=40%>


### 4-9-2. 枠線の幅


#### 四方を指定


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">boarder-8</p>
        <div className="size-16 rounded-xl border-8 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-4</p>
        <div className="size-16 rounded-xl border-4 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-2</p>
        <div className="size-16 rounded-xl border-2 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-1</p>
        <div className="size-16 rounded-xl border-1 border-emerald-600 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/11cb70cd-7a5c-4b08-9700-215c9929768b.png" width=70%>


#### 上下、左右の二辺を指定


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">boarder-y-4</p>
        <div className="size-16 rounded-xl border-y-4 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-x-4</p>
        <div className="size-16 rounded-xl border-x-4 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">y-8 x-2</p>
        <div className="size-16 rounded-xl border-y-8 border-x-2 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">y-2 x-8</p>
        <div className="size-16 rounded-xl border-y-2 border-x-8 border-emerald-600 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/36759e6f-4002-465b-9bbe-2c53750ca27a.png" width=70%>


#### 上下左右の1辺を指定


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">boarder-t-4</p>
        <div className="size-16 rounded-xl border-t-4 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-l-4</p>
        <div className="size-16 rounded-xl border-l-4 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-b-4</p>
        <div className="size-16 rounded-xl border-b-4 border-emerald-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-r-4</p>
        <div className="size-16 rounded-xl border-r-4 border-emerald-600 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/0185cdce-0772-44de-8a79-91cc5482c5b9.png" width=70%>


### 4-9-3. 枠線の色


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">boarder-t-4</p>
        <div className="size-16 rounded-xl border-4 border-blue-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-l-4</p>
        <div className="size-16 rounded-xl border-4 border-orange-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-b-4</p>
        <div className="size-16 rounded-xl border-4 border-x-orange-500 border-y-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-r-4</p>
        <div className="size-16 rounded-xl border-4 border-t-orange-500 border-blue-600 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/ac9e8587-acde-49df-8666-f0c36aea48a8.png" width=70%>


### 4-9-4. 枠線のスタイル


https://tailwindcss.com/docs/border-style


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">boarder-solid</p>
        <div className="size-16 rounded-xl border-4 border-solid border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-dotted</p>
        <div className="size-16 rounded-xl border-4 border-dotted border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-dashed</p>
        <div className="size-16 rounded-xl border-4 border-dashed border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">boarder-double</p>
        <div className="size-16 rounded-xl border-4 border-double border-orange-600 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/57a871c6-1ef7-4c11-be4c-5f49a5ee41d7.png" width=70%>


### 4-9-5. outline


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex m-8 gap-8 text-center">
      <div className="flex flex-col items-center w-32">
        <p className="mb-3">offset-0</p>
        <div className="outline-2 outline-solid outline-blue-600 size-16 rounded-xl border-1 border-solid border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">offset-4</p>
        <div className="outline-2 outline-offset-4 outline-solid outline-blue-600 size-16 rounded-xl border-1 border-solid border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">offset-8</p>
        <div className="outline-2 outline-offset-8 outline-solid outline-blue-600 size-16 rounded-xl border-1 border-solid border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">offset-8 dashed</p>
        <div className="outline-2 outline-offset-8 outline-dashed outline-blue-600 size-16 rounded-xl border-1 border-solid border-orange-600 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/3af73641-71ff-4e7b-975e-de86832a9473.png" width=70%>


### 4-9-6. ring


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex m-8 gap-8 text-center">
      <div className="flex flex-col items-center w-32">
        <p className="mb-3">ring-2 offset-0</p>
        <div className="ring-2 ring-blue-600 size-16 rounded-xl border-1 border-solid border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">ring-2 offset-4</p>
        <div className="ring-2 ring-offset-4 ring-blue-600 size-16 rounded-xl border-1 border-solid border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">ring-2 offset-8</p>
        <div className="ring-2 ring-offset-8 ring-blue-600 size-16 rounded-xl border-1 border-solid border-orange-600 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">ring-4 offset-8</p>
        <div className="ring-4 ring-offset-8 ring-blue-600 size-16 rounded-xl border-1 border-solid border-orange-600 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/551ef876-b7cb-4227-8055-990ce76c775f.png" width=70%>


## 4-10. 背景色


### 4-10-1. ベタ塗り


https://tailwindcss.com/docs/background-color


#### デフォルト色


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex items-center m-8 gap-8 text-center">
      <div className="flex flex-col items-center">
        <p className="mb-3">bg-blue-500</p>
        <div className="size-16 rounded-sm bg-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-cyan-500</p>
        <div className="size-16 rounded-md bg-cyan-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-pink-500</p>
        <div className="size-16 rounded-lg bg-pink-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-orange-500</p>
        <div className="size-16 rounded-xl bg-orange-500 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/47d4c15b-1aa5-4f37-b1fb-672d3037d867.png" width=70%>


#### カスタム色（値を指定）


```react
<div class="bg-[#50d71e] ...">
  <!-- ... -->
</div>
```


#### カスタム色（CSS変数を利用）


```react
<div class="bg-(--my-color) ...">
  <!-- ... -->
</div>
```


### 4-10-2. 透明度


https://tailwindcss.com/docs/background-color#changing-the-opacity


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 items-center h-70 w-155 m-8 p-4 gap-0 text-center bg-amber-300">
      <div className="flex flex-col items-center">
        <p className="mb-3">bg-blue-700</p>
        <div className="size-16 rounded-sm bg-blue-700 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-blue-500</p>
        <div className="size-16 rounded-md bg-blue-500 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-blue-300</p>
        <div className="size-16 rounded-lg bg-blue-300 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-blue-100</p>
        <div className="size-16 rounded-xl bg-blue-100 p-4"></div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3">bg-blue-700/100</p>
        <div className="size-16 rounded-sm bg-blue-700/100 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-blue-700/75</p>
        <div className="size-16 rounded-md bg-blue-700/75 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-blue-700/50</p>
        <div className="size-16 rounded-lg bg-blue-700/50 p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">bg-blue-700/25</p>
        <div className="size-16 rounded-xl bg-blue-700/25 p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/0712f354-bede-454e-8234-c942ddadfe83.png" width=70%>


### 4-10-3. グラデーション（線形）


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 items-center h-90 w-180 m-8 p-8 gap-0 text-center bg-amber-300">
      <div className="bg-linear-to-r from-sky-400 to-indigo-700 size-32 rounded-sm p-4"></div>
      <div className="bg-linear-to-b from-sky-400 to-indigo-700 size-32 rounded-sm p-4"></div>
      <div className="bg-linear-to-tr from-sky-400 to-indigo-700 size-32 rounded-sm p-4"></div>
      <div className="bg-linear-to-bl from-sky-400 to-indigo-700 size-32 rounded-sm p-4"></div>
      <div className="bg-linear-to-r from-indigo-700 to-blue-700/0 size-32 rounded-sm p-4"></div>
      <div className="bg-linear-to-r from-orange-700 to-violet-700 size-32 rounded-sm p-4"></div>
      <div className="bg-linear-to-r from-pink-500 to-emerald-700 size-32 rounded-sm p-4"></div>
      <div className="bg-linear-to-r from-white to-black size-32 rounded-sm p-4"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/1ea1a202-f8cf-4b36-b597-3769840a5c5e.png" width=70%>


### 4-10-4. グラデーション（円形）


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 items-center h-90 w-180 m-8 p-8 gap-0 text-center bg-amber-300">
      <div className="bg-conic from-sky-400 to-indigo-700 size-32 rounded-sm p-4"></div>
      <div className="bg-conic from-pink-400 to-rose-700 size-32 rounded-sm p-4"></div>
      <div className="bg-conic from-indigo-700 to-indigo-100 size-32 rounded-sm p-4"></div>
      <div className="bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700 size-32 rounded-sm p-4"></div>
      <div className="bg-conic from-sky-400 to-indigo-700 size-32 rounded-full p-4"></div>
      <div className="bg-conic from-pink-400 to-rose-700 size-32 rounded-full p-4"></div>
      <div className="bg-conic from-indigo-700 to-indigo-100 size-32 rounded-full p-4"></div>
      <div className="bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700 size-32 rounded-full p-4"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/7c2c5206-df35-4b0f-a87c-700b5aa4fbba.png" width=70%>



### 4-10-5. グラデーション（コーン型）


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 items-center h-90 w-180 m-8 p-8 gap-0 text-center bg-amber-300">
      <div className="bg-conic from-sky-400 to-indigo-700 size-32 rounded-sm p-4"></div>
      <div className="bg-conic from-pink-400 to-rose-700 size-32 rounded-sm p-4"></div>
      <div className="bg-conic from-indigo-700 to-indigo-100 size-32 rounded-sm p-4"></div>
      <div className="bg-conic from-indigo-700 to-blue-700/0 size-32 rounded-sm p-4"></div>
      <div className="bg-conic from-sky-400 to-indigo-700 size-32 rounded-full p-4"></div>
      <div className="bg-conic from-pink-400 to-rose-700 size-32 rounded-full p-4"></div>
      <div className="bg-conic from-indigo-700 to-indigo-100 size-32 rounded-full p-4"></div>
      <div className="bg-conic from-indigo-700 to-blue-700/0 size-32 rounded-full p-4"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/0f2ea9d1-58de-4c87-a2f3-cc20d7169e79.png" width=70%>


### 4-10-6. 経由色や位置の設定


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-1 items-center h-90 w-180 m-8 p-8 gap-0 text-center bg-amber-300">
      <div className="bg-linear-to-r from-pink-700 via-emerald-400 to-indigo-700 h-32 w-164 rounded-sm p-4"></div>
      <div className="bg-linear-to-r from-pink-700 from-20% via-emerald-400 via-60% to-indigo-700 to-90% h-32 w-164 rounded-sm p-4"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d2aa1f3e-d312-44d8-b28f-955fe42d83c1.png" width=70%>


## 4-11. 背景画像


### 4-11-1. 貼る


#### 静的な画像ファイル


bg-[url('画像のURL')] のように書くと、画像を貼り付けできます
インターネット上のURLでも、ローカルPATHでも指定できます


以下の場合は/public/bg_image.jtifを参照しています


```react
<div className="w-full h-screen overflow-hidden bg-[url('/bg_image.jfif')] bg-cover bg-center bg-no-repeat">
```
<img src="" width=70%>


#### 動的に取得した画像ファイル


試してないですがAPIから受け取った画像を背景に置くことも出来るようです


https://stackoverflow.com/questions/70805041/background-image-in-tailwindcss-using-dynamic-url-react-js


```
<div
  style={{'--image-url': `url(${fetchedUrl})`}} 
  className='bg-[image:var(--image-url)]'>
    <!-- ... -->
</div>
```


### 4-11-2. スクロール設定


https://tailwindcss.com/docs/background-attachment


bg-fixed: 背景画像をスクロールしない
scroll: マウスカーソルが要素内にあるときはスクロールしない
local: スクロールする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div>
      <div className="m-16 text-3xl">ここにマウスカーソルがあるとスクロールする</div>
      <div className="w-full h-screen overflow-y-scroll bg-[url('/bg_image.jfif')] bg-cover bg-center bg-no-repeat bg-scroll">
        <div>
          <div className="m-16 text-3xl">ここより下にマウスカーソルがあると文字だけスクロール</div>
          <div className="mt-256 bg-white p-8 text-gray-500">
            <div className="font-inter text-2xl font-extrabold tracking-tight text-black">
              My trip to the summit
            </div>
            <div className="mt-1 text-sm font-medium text-gray-500">
              November 16, 2021 · 4 min read
            </div>
            <p className="mt-4 leading-7">
              Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?
            </p>
            <p className="mt-4 leading-7">
              Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.
            </p>
            <p className="my-16 leading-7">
              hoge hoge fuga fuga
            </p>
            <p className="my-16 leading-7">
              hoge hoge fuga fuga
            </p>
            <p className="my-16 leading-7">
              hoge hoge fuga fuga
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/a051db2f-832c-4d57-bf7c-fb20adf9472a.png" width=70%>


### 4-11-3. 表示範囲


背景を貼る範囲を指定できます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="w-2/3 m-8 p-4 gap-4 flex border-4 border-dashed border-amber-500 bg-amber-100">
      <div className="bg-clip-border overflow-hidden bg-cover bg-center bg-[url('/bg_image.jfif')] p-8 w-64 h-64 border-8 border-dashed border-amber-500 bg-amber-200">
        <div>hoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga</div>
      </div>
      <div className="bg-clip-padding overflow-hidden bg-cover bg-center bg-[url('/bg_image.jfif')] p-8 w-64 h-64 border-8 border-dashed border-amber-500 bg-amber-200">
        <div>hoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga</div>
      </div>
      <div className="bg-clip-content overflow-hidden bg-cover bg-center bg-[url('/bg_image.jfif')] p-8 w-64 h-64 border-8 border-dashed border-amber-500 bg-amber-200">
        <div>hoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fugahoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga hoge hoge fuga fuga</div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/8af653b1-0736-4124-8d53-a8b56ed0b9da.png" width=70%>


### 4-11-4. 表示位置


表示範囲より大きい画像の場合に画像のどの位置を表示するか指定します
https://tailwindcss.com/docs/background-position


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 w-150 h-140 m-4 p-4 gap-4 border-4 border-dashed border-amber-500 bg-amber-100">
      <div className="bg-top-left bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-top  bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-top-right  bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-left  bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-center  bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-right  bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-bottom-left  bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-bottom  bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-bottom-right  bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/bb74e60c-a968-4a61-85e2-0aa8715ff924.png" width=70%>


## 4-11-5. サイズ


bg-auto: 原寸
bg-cover: 短い辺が収まるように縮小
bg-contain: 長い辺が収まるように縮小
bg-size-[200px]: 長い辺が200pxになるように拡大縮小


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 w-200 h-95 m-4 p-4 gap-4 border-4 border-dashed border-amber-500 bg-amber-100">
      <div className="bg-center bg-auto bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-center bg-contain col-span-2 bg-[url('/bg_image.jfif')] w-90 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-center bg-size-[400px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-center bg-size-[200px] bg-[url('/bg_image.jfif')] w-40 h-40 border-6 border-dashed border-amber-500"></div>
      <div className="bg-center bg-size-[100px] col-span-2 bg-[url('/bg_image.jfif')] w-90 h-40 border-6 border-dashed border-amber-500"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/0e612a8b-cb38-4a32-ba05-6a06cb1aaf0b.png" width=70%>


## 4-12. エフェクト


### 4-12-1. opacity


```react:/app/routes/home.tsx
<button class="bg-indigo-500  opacity-50 ...">Save changes</button>
```


### 4-12-2. box-shadow


https://tailwindcss.com/docs/box-shadow


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-4 items-end w-128 m-8 gap-8 text-center">
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-none</p>
        <div className="shadow-none size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex flex-col items-center w-32">
        <p className="mb-3">shadow-md</p>
        <div className="shadow-md size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-xl</p>
        <div className="shadow-xl size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-2xl</p>
        <div className="shadow-2xl size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-2xl</p>
        <div className="shadow-2xl size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-2xl/20</p>
        <div className="shadow-2xl/20 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-2xl/30</p>
        <div className="shadow-2xl/30 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-2xl/50</p>
        <div className="shadow-2xl/50 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-amber-600</p>
        <div className="shadow-2xl shadow-amber-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-blue-600</p>
        <div className="shadow-2xl shadow-blue-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-emerald-600</p>
        <div className="shadow-2xl shadow-emerald-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex flex- shrink-0 flex-col items-center w-32">
        <p className="mb-3">shadow-red-600</p>
        <div className="shadow-2xl shadow-red-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">inset_shadow-amber-600</p>
        <div className="inset-shadow-sm inset-shadow-amber-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">inset_shadow-blue-600</p>
        <div className="inset-shadow-sm inset-shadow-blue-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">inset_shadow-emerald-600</p>
        <div className="inset-shadow-sm inset-shadow-emerald-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">inset_shadow-red-600</p>
        <div className="inset-shadow-sm inset-shadow-red-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex shrink-0 flex-col items-center w-32">
        <p className="mb-3">inset_shadow-sm</p>
        <div className="inset-shadow-sm inset-shadow-red-600 size-16 rounded-xl p-4"></div>
      </div>
      <div className="flex flex- shrink-0 flex-col items-center w-32">
        <p className="mb-3">inset_shadow-none</p>
        <div className="inset-shadow-none inset-shadow-red-600 size-16 rounded-xl p-4"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b7a379a2-7f40-4682-9628-2434f5bcc966.png" width=70%>


### 4-12-3. text-shadow


https://tailwindcss.com/docs/text-shadow


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-col w-170 m-8 p-8 gap-8 text-3xl text-bold text-white">
      <div className="text-shadow-sm">The quick brown fox jumps over the lazy dog.</div>
      <div className="text-shadow-md">The quick brown fox jumps over the lazy dog.</div>
      <div className="text-shadow-lg">The quick brown fox jumps over the lazy dog.</div>
      <div className="text-shadow-sm text-shadow-blue-700">The quick brown fox jumps over the lazy dog.</div>
      <div className="text-shadow-md text-shadow-blue-700">The quick brown fox jumps over the lazy dog.</div>
      <div className="text-shadow-lg text-shadow-blue-700">The quick brown fox jumps over the lazy dog.</div>
      <div className="text-shadow-lg text-shadow-blue-700/25">The quick brown fox jumps over the lazy dog.</div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b4c6e4ec-fba0-451f-bbc5-53c95b765c22.png" width=70%>


### 4-12-4. 背景色を重ねる


https://tailwindcss.com/docs/mix-blend-mode


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-col m-8 p-8 gap-8 w-100 bg-amber-300">
      <div className="flex justify-center -space-x-14">
        <div className="size-32 rounded-full bg-blue-500"></div>
        <div className="size-32 rounded-full bg-pink-500"></div>
      </div>
      <div className="flex justify-center -space-x-14">
        <div className="size-32 rounded-full bg-blue-500 mix-blend-multiply"></div>
        <div className="size-32 rounded-full bg-pink-500 mix-blend-multiply"></div>
      </div>
      <div className="isolate flex justify-center -space-x-14">
        <div className="size-32 rounded-full bg-blue-500 mix-blend-multiply"></div>
        <div className="size-32 rounded-full bg-pink-500 mix-blend-multiply"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/46d70641-d3db-4eba-b1f4-0e44fdcde0fe.png" width=70%>


### 4-12-5. 背景画像と色を重ねる


https://tailwindcss.com/docs/background-blend-mode


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 w-150 h-50 m-4 p-4 gap-4 bg-amber-500">
      <div className="bg-blue-600 bg-blend-multiply bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="bg-blue-600 bg-blend-soft-light bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/694d1178-8dc0-497e-8086-c8587154f626.png" width=70%>


## 4-13. マスク


### 4-13-1. 画像をマスクする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div>
      <div className="flex justify-center g-8 gap-8 text-center font-mono text-lg">
        <div className="flex flex-col items-center">
          <p className="mb-3">mask-clip-border</p>
          <div className="relative size-50 rounded-lg border-3 border-dashed border-indigo-500/50">
            <div className="mask-clip-border p-4 absolute -inset-[3px] bg-[url('/bg_image.jfif')] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center"></div>
          </div>
        </div>
        <div className="flex flex-col items-center">
          <p className="mb-3">mask-clip-padding</p>
          <div className="relative size-50 rounded-lg border-3 border-dashed border-indigo-500/50">
            <div className="mask-clip-padding p-4 absolute -inset-[3px] bg-[url('/bg_image.jfif')] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center"></div>
          </div>
        </div>
        <div className="flex flex-col items-center">
          <p className="mb-3">mask-clip-content</p>
          <div className="relative size-50 rounded-lg border-3 border-dashed border-indigo-500/50">
            <div className="mask-clip-content p-4 absolute -inset-[3px] bg-[url('/bg_image.jfif')] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center"></div>
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/3bf8158f-a2a0-483d-a919-f00556add8b8.png" width=70%>


### 4-13-2. マスクの合成


https://tailwindcss.com/docs/mask-composite


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex gap-4">
      <div className="relative grid justify-center">
        <div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] size-24 rounded-full"></div>
        <div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] size-24 rounded-full"></div>
        <p className="mb-3 text-center">mask-add</p>
        <div className="mask-add h-24 w-48 bg-[url('/bg_image.jfif')] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center"></div>
      </div>
      <div className="relative grid justify-center">
        <div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] size-24 rounded-full"></div>
        <div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] size-24 rounded-full"></div>
        <p className="mb-3 text-center">mask-subtract</p>
        <div className="mask-subtract h-24 w-48 bg-[url('/bg_image.jfif')] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center"></div>
      </div>
      <div className="relative grid justify-center">
        <div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] size-24 rounded-full"></div>
        <div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] size-24 rounded-full"></div>
        <p className="mb-3 text-center">mask-intersect</p>
        <div className="mask-intersect h-24 w-48 bg-[url('/bg_image.jfif')] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center"></div>
      </div>
      <div className="relative grid justify-center">
        <div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] size-24 rounded-full"></div>
        <div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] size-24 rounded-full"></div>
        <p className="mb-3 text-center">mask-exclude</p>
        <div className="mask-exclude h-24 w-48 bg-[url('/bg_image.jfif')] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center"></div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/085684dc-b611-47e2-ad26-9a01a32a06f8.png" width=100%>


### 4-13-3. 画像を使ってマスクする


https://tailwindcss.com/docs/mask-image


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-col m-8 gap-8">
      <div 
        className="h-50 w-150 bg-[url('/mask.png')] bg-cover bg-center bg-no-repeat mask-size-[110%_90%] mask-center mask-no-repeat" 
      ></div>
      <div 
        className="h-50 w-150 bg-[url('/bg_image.jfif')] bg-cover bg-center bg-no-repeat mask-size-[110%_90%] mask-center mask-no-repeat" 
      ></div>
      <div 
        className="h-50 w-150 bg-[url('/bg_image.jfif')] bg-cover bg-center bg-no-repeat mask-size-[110%_90%] mask-center mask-no-repeat" 
        style={{ maskImage: "url('/mask.png')" }}
      ></div>
    </div>

  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/63006239-ed8c-44af-bdb1-87cf7f11a373.png" width=70%>


### 4-13-4. グラデーションでマスクする


https://tailwindcss.com/docs/mask-image


#### 上下左右からマスク


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-5 w-240 h-50 m-4 p-4 gap-4">
      <div className="bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-t-from-0% bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-b-from-0% bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-l-from-0% bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-r-from-0% bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-t-from-0% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-b-from-0% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-l-from-0% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-r-from-0% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-r-from-0% mask-r-to-100% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-r-from-0% mask-r-to-50% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-r-from-60% mask-t-to-90% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-b-from-60% mask-l-to-90% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-t-from-60% mask-l-to-90% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-x-from-60% mask-x-to-90% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-y-from-60% mask-y-to-90% bg-blue-600 bg-blend-overlay bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/38e6c459-5510-403a-875b-fb4e82a45b2c.png" width=70%>


#### 角度を指定する


角度を指定してマスクをかけることもできます


```react:/app/routes/home.tsx
<div class="mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="-mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
```


#### マスクを無効にする


```react
<div className="mask-none bg-[url('/bg_image.jfif')]"></div>
```


### 4-13-5. 丸くマスクする


#### 丸くマスクする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-3 w-100 h-50 m-4 p-4 gap-4">
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-top-left bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-top bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-top-right bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-left bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-center bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-right bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-bottom-left bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-bottom bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      <div className="mask-radial-[50%_50%] mask-radial-from-100% mask-radial-at-bottom-right bg-center bg-cover bg-[url('/bg_image.jfif')] w-40 h-40"></div>
      </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d0416ac4-49f9-4ec5-87cf-13df42c51f25.png" width=40%>


#### 丸くマスクする（角や横辺基準）


角や横辺を基準に位置と大きさを設定できます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="grid grid-cols-2 w-200 h-50 m-4 p-4 gap-4">
      <div className="mask-radial-closest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-center bg-cover bg-[url('/bg_image.jfif')] w-80 h-40"></div>
      <div className="mask-radial-closest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-center bg-cover bg-[url('/bg_image.jfif')] w-80 h-40"></div>
      <div className="mask-radial-farthest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-center bg-cover bg-[url('/bg_image.jfif')] w-80 h-40"></div>
      <div className="mask-radial-farthest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-center bg-cover bg-[url('/bg_image.jfif')] w-80 h-40"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/19468e3a-2067-4bb0-aed3-868e38308b83.png" width=70%>


### 4-13-6. コーン型にマスクする


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-col">
      <div className="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 p-8">
        <div className="mx-auto flex w-full max-w-sm items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5">
          <div className="grid grid-cols-1 grid-rows-1">
            <div className="col-start-1 row-start-1 size-12 rounded-full border-4 border-gray-100"></div>
            <div className="col-start-1 row-start-1 size-12 rounded-full border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75%"></div>
          </div>
          <div className="w-0 flex-1 text-sm text-gray-950">
            <p className="font-medium">Storage used: 75%</p>
            <p className="mt-1 text-gray-500">
              <span className="font-medium">0.48 GB</span> out of 2 GB remaining
            </p>
          </div>
        </div>
      </div>
      <div className="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 p-8">
        <div className="mx-auto flex w-full max-w-sm items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5">
          <div className="grid grid-cols-1 grid-rows-1">
            <div className="col-start-1 row-start-1 size-12 rounded-full border-4 border-gray-200"></div>
            <div className="col-start-1 row-start-1 size-12 rounded-full border-4 border-blue-500 mask-conic-from-50% mask-conic-to-50%"></div>
          </div>
          <div className="w-0 flex-1 text-sm text-gray-950">
            <p className="font-medium">Storage used: 50%</p>
            <p className="mt-1 text-gray-500">
              <span className="font-medium">1.00 GB</span> out of 2 GB remaining
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/891134bb-16d6-4289-b8ff-efae16548594.png" width=60%>


### 4-13-7. mode


明度で指定するか、透明度で指定するか選べます


mask-alpha: 透明な部分がマスクされます
mask-luminance: 明度の低い部分がマスクされます
mask-match: 画像の場合はalpha, それ以外ではluminanceになります


### 4-13-8. mask-origin


https://tailwindcss.com/docs/mask-origin


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-160 m-8">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">mask-origin-border</p>
        <div className="relative size-48 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] bg-[url('/bg_image.jfif')] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-border p-1.5"></div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">mask-origin-padding</p>
        <div className="relative size-48 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url('/bg_image.jfif')] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-padding p-1.5"></div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3">mask-origin-content</p>
        <div className="relative size-48 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url('/bg_image.jfif')] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-content p-1.5"></div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/64e34e6c-f310-4436-8a9c-a2b2a3c52971.png" width=80%>


## 4-14. filter


### 4-14-1. blur


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-200 m-8">
      <div className="blur-none relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="blur-xs relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="blur-md relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="blur-xl relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5e1c507d-eb8d-4231-9e6a-6ee1a91a4964.png" width=70%>


### 4-14-2. brightness


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-200 m-8">
      <div className="relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="brightness-50 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="brightness-100 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="brightness-200 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b8641807-dbeb-47cc-bc44-640471199dd4.png" width=70%>


### 4-14-3. contrast


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-200 m-8">
      <div className="relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="contrast-50 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="contrast-100 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="contrast-200 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/fc3cc033-d112-40f7-8a92-63a867c59b1f.png" width=70%>


### 4-14-4. drop-shadow


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row w-150 m-8 gap-8">
      <svg className="drop-shadow-none drop-shadow-blue-500 size-28 text-gray-950/100" viewBox="0 0 84 84">
        <path d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z" className="fill-amber-100"/>
      </svg>
      <svg className="drop-shadow-xs drop-shadow-blue-500 size-28 text-gray-950/100" viewBox="0 0 84 84">
        <path d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z" className="fill-amber-100"/>
      </svg>
      <svg className="drop-shadow-md drop-shadow-blue-500 size-28 text-gray-950/100" viewBox="0 0 84 84">
        <path d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z" className="fill-amber-100"/>
      </svg>
      <svg className="drop-shadow-xl drop-shadow-blue-500 size-28 text-gray-950/100" viewBox="0 0 84 84">
        <path d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z" className="fill-amber-100"/>
      </svg>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/90735b06-3f79-4c5a-af12-997b135a7ae7.png" width=70%>


### 4-14-5. hue-rotate


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-200 m-8">
      <div className="hue-rotate-15 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="hue-rotate-90 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="hue-rotate-180 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="hue-rotate-270 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b405c831-28ed-4ec8-b76f-ec7a35f5d2e2.png" width=70%>


### 4-14-6. invert


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-200 m-8">
      <div className="invert-0 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="invert-20 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="invert-60 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="invert relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/8ec55acd-dcfb-4ddf-9cd7-0326dfbce4bb.png" width=70%>


## 4-14-7. saturate


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-200 m-8">
      <div className="saturate-0 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="saturate-50 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="saturate-100 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="saturate-200 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/607c5a47-9856-4e37-8322-39d505fd9e9e.png" width=70%>


## 4-14-8. sepia


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-200 m-8">
      <div className="sepia-0 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="sepia-50 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="sepia-100 relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
      <div className="sepia relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5"></div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/66e34b87-273e-4f55-8920-45333c75ee4f.png" width=70%>


## 4-14-9. backdrop-filter


要素の背後だけ限定して背景画像にフィルタをかけることができます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-between text-center font-mono text-lg font-medium text-gray-900 w-200 m-8">
      <div className="relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5">
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="backdrop-blur-none size-20"></div>
        </div>
      </div>
      <div className="relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5">
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="backdrop-blur-xs size-20"></div>
        </div>
      </div>
      <div className="relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5">
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="backdrop-blur-md size-20"></div>
        </div>
      </div>
      <div className="relative size-48 bg-[url('/bg_image.jfif')] bg-cover bg-center p-1.5">
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="backdrop-blur-xl size-20"></div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/98d4006b-a185-490d-a34c-2184a93c470d.png" width=70%>


## 4-15. table


### 4-15-1. boader-collapse


https://tailwindcss.com/docs/border-collapse


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <>
      <div className="p-8 w-128">
        <table className="w-full border-separate border">
          <thead className="bg-gray-200">
            <tr><th className="w-1/2 border border-gray-400 p-4 text-left font-semibold text-gray-900">State</th><th className="w-1/2 border border-gray-400 p-4 text-left font-semibold text-gray-900">City</th></tr>
          </thead>
          <tbody>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Indiana</td><td className="border border-gray-400 p-4 text-gray-500">Indianapolis</td></tr>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Ohio</td><td className="border border-gray-400 p-4 text-gray-500">Columbus</td></tr>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Michigan</td><td className="border border-gray-400 p-4 text-gray-500">Detroit</td></tr>
          </tbody>
        </table>
      </div>
      <div className="p-8 w-128">
        <table className="w-full border-collapse border">
          <thead className="bg-gray-200">
            <tr><th className="w-1/2 border border-gray-400 p-4 text-left font-semibold text-gray-900">State</th><th className="w-1/2 border border-gray-400 p-4 text-left font-semibold text-gray-900">City</th></tr>
          </thead>
          <tbody>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Indiana</td><td className="border border-gray-400 p-4 text-gray-500">Indianapolis</td></tr>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Ohio</td><td className="border border-gray-400 p-4 text-gray-500">Columbus</td></tr>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Michigan</td><td className="border border-gray-400 p-4 text-gray-500">Detroit</td></tr>
          </tbody>
        </table>
      </div>
    </>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5af8dd4d-9929-49ef-8ae9-2cb0aedc0011.png" width=40%>


### 4-15-2. boader-spacing


https://tailwindcss.com/docs/border-spacing


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <>
      <div className="p-8 w-128 h-52">
        <table className="w-full border-separate border">
          <thead className="bg-gray-200">
            <tr><th className="w-1/2 border border-gray-400 p-4 text-left font-semibold text-gray-900">State</th><th className="w-1/2 border border-gray-400 p-4 text-left font-semibold text-gray-900">City</th></tr>
          </thead>
          <tbody>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Indiana</td><td className="border border-gray-400 p-4 text-gray-500">Indianapolis</td></tr>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Ohio</td><td className="border border-gray-400 p-4 text-gray-500">Columbus</td></tr>
          </tbody>
        </table>
      </div>
      <div className="p-8 w-128">
        <table className="w-full border-separate border-spacing-2 border">
          <thead className="bg-gray-200">
            <tr><th className="w-1/2 border border-gray-400 p-4 text-left font-semibold text-gray-900">State</th><th className="w-1/2 border border-gray-400 p-4 text-left font-semibold text-gray-900">City</th></tr>
          </thead>
          <tbody>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Indiana</td><td className="border border-gray-400 p-4 text-gray-500">Indianapolis</td></tr>
            <tr><td className="border border-gray-400 p-4 text-gray-500">Ohio</td><td className="border border-gray-400 p-4 text-gray-500">Columbus</td></tr>
          </tbody>
        </table>
      </div>
    </>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/37d5f8af-f654-4a9f-ab77-c921b8dc1782.png" width=50%>


### 4-15-3. table-auto


table-autoにすると列幅を自動調整します
table-fixedにすると列幅が固定になります


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <>
      <div className="p-8 w-full">
        <table className="w-full table-auto border-collapse border">
          <thead className="bg-gray-200">
            <tr>
              <th className="border border-gray-400 p-4 text-left font-semibold text-gray-900">Song</th>
              <th className="border border-gray-400 p-4 text-left font-semibold text-gray-900">Artist</th>
              <th className="border border-gray-400 p-4 text-left font-semibold text-gray-900">Year</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-gray-400 p-4 text-gray-500">The Sliding Mr. Bones (Next Stop, Pottersville)</td>
              <td className="border border-gray-400 p-4 text-gray-500">Malcolm Lockyer</td>
              <td className="border border-gray-400 p-4 text-gray-500">1961</td>
            </tr>
            <tr>
              <td className="border border-gray-400 p-4 text-gray-500">Witchy Woman</td>
              <td className="border border-gray-400 p-4 text-gray-500">The Eagles</td>
              <td className="border border-gray-400 p-4 text-gray-500">1972</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div className="p-8 w-full">
        <table className="w-full table-fixed border-collapse border">
          <thead className="bg-gray-200">
            <tr>
              <th className="border border-gray-400 p-4 text-left font-semibold text-gray-900">Song</th>
              <th className="border border-gray-400 p-4 text-left font-semibold text-gray-900">Artist</th>
              <th className="border border-gray-400 p-4 text-left font-semibold text-gray-900">Year</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-gray-400 p-4 text-gray-500">The Sliding Mr. Bones (Next Stop, Pottersville)</td>
              <td className="border border-gray-400 p-4 text-gray-500">Malcolm Lockyer</td>
              <td className="border border-gray-400 p-4 text-gray-500">1961</td>
            </tr>
            <tr>
              <td className="border border-gray-400 p-4 text-gray-500">Witchy Woman</td>
              <td className="border border-gray-400 p-4 text-gray-500">The Eagles</td>
              <td className="border border-gray-400 p-4 text-gray-500">1972</td>
            </tr>
          </tbody>
        </table>
      </div>
    </>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/ee628c7b-f97b-400e-93c5-c228a5d772ac.png" width=70%>


### 4-15-4. caption


caption-topでcaptionを表の上に表示
caption-bottomでcaptionを表の下に表示


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <>
      <div className="p-8 w-2/3">
        <table className="w-full table-auto border-collapse">
          <caption className="caption-top ext-center text-gray-500 mb-4">
            Table 3.1: Professional wrestlers and their signature moves.
          </caption>
          <thead className="bg-gray-100">
            <tr>
              <th className="p-4 text-left text-gray-500 font-medium">Wrestler</th>
              <th className="p-4 text-left text-gray-500 font-medium">Signature Move(s)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="p-4 text-gray-700">"Stone Cold" Steve Austin</td>
              <td className="p-4 text-gray-700">Stone Cold Stunner, Lou Thesz Press</td>
            </tr>
            <tr>
              <td className="p-4 text-gray-700">Bret "The Hitman" Hart</td>
              <td className="p-4 text-gray-700">The Sharpshooter</td>
            </tr>
            <tr>
              <td className="p-4 text-gray-700">Razor Ramon</td>
              <td className="p-4 text-gray-700">Razor's Edge, Fallaway Slam</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div className="p-8 w-2/3">
        <table className="w-full table-auto border-collapse">
          <caption className="caption-bottom ext-center text-gray-500 mb-4">
            Table 3.1: Professional wrestlers and their signature moves.
          </caption>
          <thead className="bg-gray-100">
            <tr>
              <th className="p-4 text-left text-gray-500 font-medium">Wrestler</th>
              <th className="p-4 text-left text-gray-500 font-medium">Signature Move(s)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="p-4 text-gray-700">"Stone Cold" Steve Austin</td>
              <td className="p-4 text-gray-700">Stone Cold Stunner, Lou Thesz Press</td>
            </tr>
            <tr>
              <td className="p-4 text-gray-700">Bret "The Hitman" Hart</td>
              <td className="p-4 text-gray-700">The Sharpshooter</td>
            </tr>
            <tr>
              <td className="p-4 text-gray-700">Razor Ramon</td>
              <td className="p-4 text-gray-700">Razor's Edge, Fallaway Slam</td>
            </tr>
          </tbody>
        </table>
      </div>
    </>  
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/30fa302c-3bef-4543-8a4a-14e9ea140be2.png" width=70%>


## 4-16. transition


### 4-16-1. transition-property


https://tailwindcss.com/docs/transition-property


transitionを有効にする対象を指定します
デフォルトでは無効になっています


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="p-8">
      <div className="flex justify-around text-white">
        <button className="rounded-md bg-blue-500 px-4 py-2 text-2xl font-semibold text-white delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500">
          Save Changes
        </button>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5a3bd87b-99fb-43b3-a96b-7755e0e899b4.png" width=40%>


### 4-16-2. motion-reduce


OSがアニメーションを減らす設定になっている場合の挙動を指定して書くことができます


motion-reduce: で設定すると、アニメーションを減らす設定になっている場合の挙動を指定できます
motion-safe: で設定すると、アニメーションを減らす設定になっていない場合の挙動を指定できます


## 4-16-3. transition-discreate


https://tailwindcss.com/docs/transition-behavior


transition-discreteにするとtransition-behavior: allow-discrete;に設定できます


### 4-16-4. transition-duration


https://tailwindcss.com/docs/transition-duration


ミリ秒単位でdurationを指定します
duration-initialにすると初期値である0ミリ秒になります


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex flex-row justify-around gap-8 text-lg w-1/3 m-8">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center">
          duration-150
        </p>
        <button className="rounded-md bg-violet-500 px-4 py-2 font-bold text-white duration-150 ease-in-out hover:scale-125">
          Button A
        </button>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center">
          duration-300
        </p>
        <button className="rounded-md bg-violet-500 px-4 py-2 font-bold text-white duration-300 ease-in-out hover:scale-125">
          Button B
        </button>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center">
          duration-700
        </p>
        <button className="rounded-md bg-violet-500 px-4 py-2 font-bold text-white duration-700 ease-in-out hover:scale-125">
          Button C
        </button>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/21b1d342-5fcc-4a81-991c-b2eb7d499a03.png" width=70%>


### 4-16-5. transition-timing


https://tailwindcss.com/docs/transition-timing-function


transitionのタイミング挙動を指定します


等速でじわっと変化させる場合はease-linear
最初ゆっくりで加速していく場合はease-in
最初速くて止まる前に減速していく場合はease-out
ゆっくり → 加速 → ゆっくりとするのがease-in-out


### 4-16-6. delay 


https://tailwindcss.com/docs/transition-delay


transition開始までの遅れ時間をミリ秒で指定します
delay-300で300ミリ秒になります


### 4-16-7. アニメーション


https://tailwindcss.com/docs/animation


よく使うようなtransitionアニメーションを一発指定できます
マジか


#### animate-spin


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="m-8">
      <button type="button" className="inline-flex cursor-not-allowed items-center rounded-md bg-indigo-500 px-4 py-2 text-sm leading-6 font-semibold text-white transition duration-150 ease-in-out hover:bg-indigo-400" disabled={true}>
        <svg className="mr-3 -ml-1 size-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
        </svg>
        Processing…
      </button>
    </div>
  );
}
```


くるくる回ります


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/810886c1-dc35-4185-b4a1-fd373bb4f58d.png" width=40%>


#### animate-ping


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="m-8">
      <span className="relative inline-flex">
        <button type="button" className="inline-flex cursor-not-allowed items-center rounded-md bg-white px-4 py-2 text-sm leading-6 font-semibold text-sky-500 ring-1 ring-gray-900/10 transition duration-150 ease-in-out dark:bg-white/5 dark:ring-white/20" disabled={true}>
          Transactions
        </button>
        <span className="absolute top-0 right-0 -mt-1 -mr-1 flex size-3">
          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" />
          <span className="relative inline-flex size-3 rounded-full bg-sky-500" />
        </span>
      </span>
    </div>
  );
}
```


ピコピコさせます


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/e31da779-f723-48ce-b866-1818ab602c6f.png" width=40%>


#### animate-pulse


opacity 1～0.5 の間を交互に動かして鼓動感のあるアニメーションを付与します


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="animate-pulse w-32 h-16 m-8 bg-emerald-400"></div>
  );
}
```


#### animate-bounce


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="-lg flex size-40 animate-bounce items-center justify-center rounded-full bg-white p-2 ring-1 ring-gray-900/5">
      <svg className="size-6 text-violet-500" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
        <path d="M19 14l-7 7m0 0l-7-7m7 7V3" />
      </svg>
    </div>
  );
}
```


transitionYで弾むような上下動を入れます
上のサンプルだと矢印をsvgで書いたものを弾ませる挙動になります


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/df6b28af-4301-4a63-a622-ebf5dd858b46.png" width=30%>


## 4-17. transform


### 4-17-1. translate


https://tailwindcss.com/docs/translate


平行移動します


#### 斜め


translate-<数値>で左上～右下方向にシフトします


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex gap-18 p-8 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">-translate-6</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="-translate-6 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">translate-3</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="translate-3 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">translate-6</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="translate-6 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/a2a8157b-b335-49db-bcf6-0ca40043621a.png" width=70%>


#### 斜め（比率）


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f8278204-88a0-4339-b9c0-c1811132cf38.png" width=70%>


#### X軸方向


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/80288c8c-37a4-42e6-a942-05b22e7d75c6.png" width=70%>


#### Y軸方向


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/0c2f4261-4708-48ce-871b-229f0cc03af1.png" width=70%>


#### Z軸方向


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
      <div className="flex shrink-0 items-center gap-16 p-16 pb-12 font-mono font-bold">
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-12 text-center font-mono text-lg font-medium text-gray-900">-translate-z-8</p>
          <div className="relative rotate-x-50 rotate-z-45 transform-3d">
            <div className="absolute inset-0 overflow-y-hidden rounded-lg backdrop-blur-sm">
              <img className="size-24 object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            </div>
            <div className="relative z-10 -translate-z-8">
              <img className="size-24 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset" />
            </div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-12 text-center font-mono text-lg font-medium text-gray-900">translate-z-4</p>
          <div className="relative rotate-x-50 rotate-z-45 transform-3d">
            <div className="absolute inset-0 overflow-y-hidden rounded-lg">
              <img className="size-24 object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            </div>
            <div className="relative z-10 translate-z-4">
              <img className="size-24 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset" />
            </div>
          </div>
        </div>
        <div className="flex shrink-0 flex-col items-center">
          <p className="mb-12 text-center font-mono text-lg font-medium text-gray-900">translate-z-12</p>
          <div className="relative rotate-x-50 rotate-z-45 transform-3d">
            <div className="absolute inset-0 overflow-y-hidden rounded-lg">
              <img className="size-24 object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            </div>
            <div className="relative z-10 translate-z-12">
              <img className="size-24 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/6512b959-0d08-4b50-8fd9-9be5ab6a449f.png" width=70%>


### 4-17-2. rotate


https://tailwindcss.com/docs/rotate


回転します


#### 角度指定


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex gap-18 p-8 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-45</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 rotate-45">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-90</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 rotate-90">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-210</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 rotate-210">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
    </div>
  );
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/a6e12860-20ef-4e6c-98d4-ba6842b03298.png" width=70%>


#### マイナス角度で指定


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex gap-18 p-8 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-45</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 -rotate-45">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-90</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 -rotate-90">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-210</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 -rotate-210">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5c0a4b91-f67f-4c3c-a992-97e1722b90ba.png" width=70%>


#### 3次元回転


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex gap-18 p-8 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-45</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 rotate-x-50 rotate-z-45">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-90</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 rotate-x-15 rotate-y-30">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">rotate-210</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 rotate-y-25 rotate-z-30">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/a6ebc973-1e1a-490a-a4ce-99c41f00faa2.png" width=70%>


### 4-17-3. scale


https://tailwindcss.com/docs/scale


元のサイズを100として、拡大縮小します

scale-75:  75%サイズで表示
scale-100: 元のサイズと同じ
scale-150: 150％サイズで表示


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex gap-18 p-8 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">scale-50</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="scale-50 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">scale-95</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="scale-95 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">scale-130</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="scale-130 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/623ea958-e1f9-451d-b13b-8cfd170dbc36.png" width=70%>


### 4-17-4. skew


https://tailwindcss.com/docs/skew


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex gap-18 p-8 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">skew-3</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="skew-3 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">skew-6</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="skew-6 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">skew-12</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10">
            <img className="skew-12 size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/7eddee03-2217-4f78-bc9e-67d4454ba829.png" width=70%>


### 4-17-5. transform-origin


https://tailwindcss.com/docs/transform-origin


transformの基準点を指定できます
デフォルトではorigin-centerになっています


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="flex gap-18 p-8 font-mono font-bold">
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">origin-center</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 origin-center rotate-45">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">origin-top-left</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 origin-top-left rotate-25">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-9 text-center font-mono text-xl font-medium ">origin-bottom</p>
        <div className="relative">
          <div className="absolute">
            <img className="size-36 rounded-lg object-cover opacity-25" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
          </div>
          <div className="relative z-10 origin-bottom rotate-90">
            <img className="size-36 rounded-lg object-cover shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;h=1000&amp;q=90" />
            <div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/938533ef-15f6-4837-93dd-d414f16bb97d.png" width=70%>


### 4-17-6. transform, transform-style


https://tailwindcss.com/docs/transform


transformをGPUで実行するように指定できます


```react:/app/routes/home.tsx
<div class="skew-y-3 transform-gpu">
  <!-- ... -->
</div>
```


transformを無効にできます


```react:/app/routes/home.tsx
<div class="skew-y-3 md:transform-none">
  <!-- ... -->
</div>
```


### 4-17-7. transform-style


https://tailwindcss.com/docs/transform-style


transform-3dとすると3D transformを有効にします
transform-flatとすると子要素の3D transformをすべて無効にします


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 p-8">
      <div className="flex flex-col gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
        <div className="flex m-4 shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-lg font-medium text-gray-900">transform-flat</p>
          <div className="size-40 p-10">
            <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-flat *:backface-visible">
              <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">1</div>
              <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">2</div>
              <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">3</div>
              <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">4</div>
              <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">5</div>
              <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">6</div>
            </div>
          </div>
        </div>
        <div className="flex m-4 shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-lg font-medium text-gray-900">transform-3d</p>
          <div className="size-40 p-10">
            <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-3d *:backface-visible">
              <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">1</div>
              <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">2</div>
              <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">3</div>
              <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">4</div>
              <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">5</div>
              <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">6</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/56687607-91ba-446d-9af1-9ac99a700b2f.png" width=70%>


### 4-17-8. backface-visibility


https://tailwindcss.com/docs/backface-visibility


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 p-8">
      <div className="flex flex-col gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
        <div className="flex m-4 shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-lg font-medium text-gray-900">backface-hidden</p>
          <div className="size-40 p-10">
            <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-3d *:backface-hidden">
              <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">1</div>
              <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">2</div>
              <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">3</div>
              <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">4</div>
              <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">5</div>
              <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">6</div>
            </div>
          </div>
        </div>
        <div className="flex m-4 shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-lg font-medium text-gray-900">backface-visible</p>
          <div className="size-40 p-10">
            <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-3d *:backface-visible">
              <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">1</div>
              <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">2</div>
              <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">3</div>
              <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">4</div>
              <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">5</div>
              <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">6</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/499eb534-2cfe-4766-8313-5d23eb4955d0.png" width=70%>


### 4-17-9. perspective


https://tailwindcss.com/docs/perspective


画角を変えて魚眼レンズっぽくしたりできます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 p-8">
      <div className="flex flex-col gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
        <div className="flex m-16 shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-lg font-medium text-gray-900">backface-hidden</p>
          <div className="size-40 p-10 ">
            <div className="size-20 perspective-dramatic rotate-[0.75_1_0.75_45deg] transform-3d *:backface-visible">
              <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">1</div>
              <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">2</div>
              <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">3</div>
              <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">4</div>
              <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">5</div>
              <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">6</div>
            </div>
          </div>
        </div>
        <div className="flex m-16 shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-lg font-medium text-gray-900">backface-visible</p>
          <div className="size-40 p-10">
            <div className="size-20 perspective-normal rotate-[0.75_1_0.75_45deg] transform-3d *:backface-visible">
              <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">1</div>
              <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">2</div>
              <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">3</div>
              <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">4</div>
              <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">5</div>
              <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">6</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f87c157d-eda0-4366-9d3b-8cddb86fb9a5.png" width=70%>


### 4-17-10. perspective-origin


https://tailwindcss.com/docs/perspective-origin


立体の基準点を設定できます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 p-8">
      <div className="flex flex-col gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
        <div className="flex m-16 shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-lg font-medium text-gray-900">backface-hidden</p>
          <div className="size-40 p-10 ">
            <div className="size-20 perspective-near perspective-origin-top-left rotate-[0.75_1_0.75_45deg] transform-3d *:backface-visible">
              <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">1</div>
              <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">2</div>
              <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">3</div>
              <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">4</div>
              <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">5</div>
              <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">6</div>
            </div>
          </div>
        </div>
        <div className="flex m-16 shrink-0 flex-col items-center">
          <p className="mb-3 text-center font-mono text-lg font-medium text-gray-900">backface-visible</p>
          <div className="size-40 p-10">
            <div className="size-20 perspective-near perspective-origin-bottom rotate-[0.75_1_0.75_45deg] transform-3d *:backface-visible">
              <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">1</div>
              <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">2</div>
              <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">3</div>
              <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">4</div>
              <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75">5</div>
              <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900">6</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/e1a1aee5-186b-4e56-9bcd-f506afef0f30.png" width=70%>


## 4-18. Interactivity



### 4-18-1. accent-color


https://tailwindcss.com/docs/accent-color


チェックボックスのチェック色など、アクセントカラーを指定します


```react:/app/routes/home.tsx
<label>
  <input type="checkbox" checked />
  Browser default
</label>
<label>
  <input class="accent-pink-500" type="checkbox" checked />
  Customized
</label>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/6f5a6517-9be7-4249-8469-1da1a3798389.png" width=70%>


### 4-18-2. appearance


https://tailwindcss.com/docs/appearance


appearance-none　ブラウザ標準のappearanceスタイルを削除します
appearance-auto　ブラウザ標準のappearanceスタイルを残します


### 4-18-3. caret-color


https://tailwindcss.com/docs/caret-color


```react:/app/routes/home.tsx
<textarea class="caret-pink-500 ..."></textarea>
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/540403b5-f9ed-4dea-a327-8438bc0786ba.png" width=70%>


### 4-18-4. color-scheme


https://tailwindcss.com/docs/color-scheme


scheme-dark　要素をダークモードで表示します
scheme-light　要素をライトモードで表示します


### 4-18-5. cursor


https://tailwindcss.com/docs/cursor


カーソルのスタイルを指定します


```react:/app/routes/home.tsx
<button class="cursor-pointer ...">Submit</button>
<button class="cursor-progress ...">Saving...</button>
<button class="cursor-not-allowed ..." disabled>Confirm</button>
```


### 4-18-6. field-sizing


https://tailwindcss.com/docs/field-sizing


field-sizing-fixed　テキスト入力枠の大きさを固定します
field-sizing-content　テキスト入力枠の大きさを文字数に合わせて変更します


### 4-18-7. pointer-events


https://tailwindcss.com/docs/pointer-events


pointer-events-auto　クリックやhoverなどのポインターイベントを有効にします　
pointer-events-none　クリックやhoverなどのポインターイベントを無効にします


### 4-18-8. resize


https://tailwindcss.com/docs/resize


要素のリサイズを許可するか否かを指定します


resize-none
resize
resize-y
resize-x


### 4-18-9. scroll-behavior


https://tailwindcss.com/docs/scroll-behavior


scroll-auto
scroll-smooth


### 4-18-10. scroll-margin


https://tailwindcss.com/docs/scroll-margin


要素のID指定でスクロールするようなとき、ナビゲーションバーなどにめり込んでしまうことがあると思います。この際、scroll位置のmarginを設定できます


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <body className="scroll-smooth">
      <header className="fixed left-0 right-0 h-14 bg-white border-b border-gray-200 flex justify-center items-center z-10">
        <nav className="space-x-4">
          <a href="#1" className="text-blue-500 hover:underline">section1</a>
          <a href="#2" className="text-blue-500 hover:underline">section2</a>
          <a href="#3" className="text-blue-500 hover:underline">section3</a>
          <a href="#4" className="text-blue-500 hover:underline">section4</a>
        </nav>
      </header>

      <main className="pt-16">
        <section id="1" className="h-[200vh] text-center scroll-mt-16">
          <h2 className="text-2xl font-bold mb-2">Headline1</h2>
          <p className="text-lg">Paragraph</p>
        </section>
        <section id="2" className="h-[200vh] text-center scroll-mt-16">
          <h2 className="text-2xl font-bold mb-2">Headline2</h2>
          <p className="text-lg">Paragraph</p>
        </section>
        <section id="3" className="h-[200vh] text-center scroll-mt-16">
          <h2 className="text-2xl font-bold mb-2">Headline3</h2>
          <p className="text-lg">Paragraph</p>
        </section>
        <section id="4" className="h-[200vh] text-center scroll-mt-16">
          <h2 className="text-2xl font-bold mb-2">Headline4</h2>
          <p className="text-lg">Paragraph</p>
        </section>
      </main>
    </body>
  );
}
```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b34b61a8-b903-4be4-be92-ea0c9215fa36.png" width=70%>


### 4-18-11. scroll-padding


https://tailwindcss.com/docs/scroll-padding


scroll-marginの場合はスクロールする要素自身に設定しますが、scroll-paddingで書けば外側の要素に1回設定するだけで済みます


### 4-18-12. scroll-snap-align


https://tailwindcss.com/docs/scroll-snap-align


スクロールをスナップする位置を指定します

snap-start
snap-end
snap-center
snap-align-none


```react:/app/routes/home.tsx
export default function Home() {
  return (
    <div className="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50">
      <div className="relative">
        <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
          <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
            snap point
          </div>
          <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
        </div>

        <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14">
          <div className="shrink-0 snap-center">
            <div className="w-4 shrink-0 sm:w-37"></div>
          </div>

          <div className="shrink-0 snap-center">
            <img
              className="bg-whit h-40 w-80 shrink-0 rounded-lg"
              src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80"
            />
          </div>

          <div className="shrink-0 snap-center">
            <img
              className="bg-whit h-40 w-80 shrink-0 rounded-lg"
              src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80"
            />
          </div>

          <div className="shrink-0 snap-center">
            <img
              className="bg-whit h-40 w-80 shrink-0 rounded-lg"
              src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80"
            />
          </div>

          <div className="shrink-0 snap-center">
            <img
              className="bg-whit h-40 w-80 shrink-0 rounded-lg"
              src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80"
            />
          </div>

          <div className="shrink-0 snap-center">
            <img
              className="bg-whit h-40 w-80 shrink-0 rounded-lg"
              src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80"
            />
          </div>

          <div className="shrink-0 snap-center">
            <img
              className="bg-whit h-40 w-80 shrink-0 rounded-lg"
              src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=160&amp;q=80"
            />
          </div>

          <div className="shrink-0 snap-center">
            <div className="w-4 shrink-0 sm:w-37"></div>
          </div>
        </div>
      </div>
    </div>
  );
}

```


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f020a9f1-db29-42e8-9298-4a6dcc3d6ac2.png" width=100%>



### 4-18-13. scroll-snap-stop


https://tailwindcss.com/docs/scroll-snap-stop


snap-always　スクロールを途中で止めてスナップします
snap-normal　通常通りのスナップにします


### 4-18-14. scroll-snap-type


https://tailwindcss.com/docs/scroll-snap-type


snap-x　横方向（X軸）にスナップ
snap-y　縦方向（Y軸）にスナップ
snap-both　縦横両方にスナップ
snap-mandatory　スナップ先がある場合は必ずスナップ
snap-proximity　近い時だけスナップ


### 4-18-15. touch-action


https://tailwindcss.com/docs/touch-action


タッチ操作でスクロールするか否かを指定します


touch-auto
touch-none
touch-pan-x
touch-pan-left
touch-pan-right
touch-pan-y
touch-pan-up
touch-pan-down
touch-pinch-zoom
touch-manipulation


### 4-18-16. user-select


https://tailwindcss.com/docs/user-select


select-none　文字を選択させない
select-text　文字を選択できる
select-all　クリックしたら文章全体を選択
select-auto　


### 4-18-17. will-change


https://tailwindcss.com/docs/will-change


## 4-20. SVG


### 4-20-1. fill


SVGの塗りつぶし指定です


https://tailwindcss.com/docs/fill


### 4-20-2. stroke


SVGの線の色指定です


https://tailwindcss.com/docs/stroke


### 4-20-3. stroke-width


線幅を指定します


https://tailwindcss.com/docs/stroke-width


## 4-21. アクセシビリティ


### 4-21-1. forced-color-adjust


ブラウザで強制ハイコントラストなどを設定している場合に
それを受け入れるか否かを指定します


https://tailwindcss.com/docs/forced-color-adjust


# まとめ


使ってない人からはいろいろ言われるTailwindですが
書いてると楽なので離れられなくなります


迷ってるようなら一度試してみてほしい