1. やりたいこと
NextやRemixで標準対応してきているTailwindの使いこなせるようになりたい
2. Tailwindについて
2-1. CSSの選択肢
CSSを書く方法として以下の4つがあるようです
- CSSをモリモリ書く
- ユーティリティファーストで書く（Tailwind CSS, Windi CSS）
- CSSフレームワークで書く（Bootstrap）
- コンポーネントライブラリを使う（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
npx create-react-router@latest my-project
cd my-project
Tailwindをインストールする
terminal
npm install tailwindcss @tailwindcss/vite
vite.config.ts
react-router v.7.4.1だとデフォルトで以下のようにtailwindcssが設定されています
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に元々書かれている@import "tailwindcss";がTailwindをimportしてくれます
/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
npm run dev
Tailwindでスタイルを適用する
あとは適当な要素のclassNameにTailwindのスタイルを書いていけばスタイルを適用できます
/app/routes/home.tsx
export default function Home() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
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）にする、という指定になります
/app/routes/home.tsx
export default function Home() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
4-2-2. 入れ子構造の要素に適用する
入れ子構造にすると内側にあるすべての要素に適用されます
同じ対象への指定が重複すると、内側の要素の指定の方が優先されます
/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>
)
}
4-2-3. 条件付き適用
hover
/app/routes/home.tsx
<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>
disabled
/app/routes/home.tsx
<button class="bg-indigo-500 disabled:opacity-50 ...">Save changes</button>
4-3. 文字デザイン
4-3-1. 文字フォント
標準で使えるフォント
デフォルトで3種類選べます
/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>
)
}
追加フォント
app.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;
}
/app/routes/home.tsxに追加
<div className="font-roboto">
font-roboto
</div>
4-3-2. 文字サイズ
通常の大小
/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>
)
}
行間高さを指定する
文字の表示高さを指定できます
文字自体の大きさはそのままなので、高さを増やすと間隔があきます
/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>
)
}
4-3-3. 文字の色
色名と濃さで指定
選べる色一覧が以下にあります
https://tailwindcss.com/docs/color
/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>
)
}
透明度を指定
透明度も指定できます
/50だと50%透過です
/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>
)
}
カスタム色を使う
任意の色を登録しておいて使うこともできます
/app/app.css
@theme {
--color-regal-blue: #243c5a;
}
/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
/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>
)
}
4-3-4. 文字スタイル
/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>
)
}
4-3-5. text-align
/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>
)
}
4-3-6. vertical-align
/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>
</>
)
}
4-3-7. フォントスムーシング
/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のように書くと縦横を同じ値で指定します
/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>
);
}
--spacingの値を変更したい場合は以下のようにcss内で指定できます
/app/app.cssに追記
@theme {
--spacing: 1px;
}
4-4-2. 固定値（Tailwindのコンテナスケール）
幅についてはxl, lg, md, sm, xsなどのコンテナスケールで指定することができます
w-32, h-128のように数値で指定すると、--spacingの値 × 数値 pxの固定値で設定されます
size-64のように書くと縦横を同じ値で指定します
/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>
);
}
4-4-3. 画面幅に合わせる
viewportに合わせる場合は以下のように書きます
ViewPort全体に合わせる
<div className="w-screen h-screen">
Large ViewPortに合わせる
<div className="w-lvw h-lvh">
Small ViewPortに合わせる
<div className="w-svw h-svh">
Dynamic ViewPortに合わせる
<div className="w-dvw h-dvh">
4-4-4. 割合
親要素に対する比率で指定することもできます
/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>
);
}
4-4-5. min, max
割合で指定しているときなどの為にmin, maxを指定できます
https://tailwindcss.com/docs/min-width
/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>
);
}
4-5. padding, margin
公式のドキュメントは以下にあります
https://tailwindcss.com/docs/padding
https://tailwindcss.com/docs/margin
4-5-1. 全体
/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>
);
}
4-5-2. 上下, 左右
上下
<div className="my-4 py-8">
左右
<div className="mx-4 px-8">
4-5-3. 一方向だけ
上
<div className="mt-4 pt-8">
下
<div className="mb-4 pb-8">
左
<div className="ml-4 pl-8">
右
<div className="mr-4 pr-8">
4-6. FLEXBOX
4-6-1. flex
公式ドキュメント
https://tailwindcss.com/docs/flex-basis
比率を数値で指定する
/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>
);
}
比率を分数で指定する
/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>
);
}
比率をコンテナスケールで指定する
xl, lg, md, sm, xsなどのコンテナスケールで指定することもできます
/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>
);
}
4-6-2. 方向を指定する
縦方向
縦方向にflexboxを並べる場合はflex-colを追加します
/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>
);
}
横方向
flex-rowだと横方向になります
/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>
);
}
逆向き
flex-col-reverse, flex-row-reverseだと横方向になります
/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>
);
}
4-6-3. 伸縮の有無
flex要素は親要素の伸縮に合わせて伸縮しますが、伸縮しないようにすることもできます
以下の3種類の挙動から選択できます
・flex-1のように比率を指定していると比率を維持しながら伸縮する
・flex-initialを指定すると縮むけど伸びない
・flex-noneを指定すると伸縮しない
/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>
);
}
4-7-4. items align
要素を上寄せ、下寄せ、中央揃えすることができます
https://tailwindcss.com/docs/align-items
全部一律で指定する
/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>
);
}
個別で1つずつ指定する
/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>
);
}
4-7-6. justify
要素自体の幅に合わせて片側に寄せたり、筋等幅で配置したりできます
右寄せ
横配置の場合
・justify-startで左寄せ
・justify-centerで中央寄せ
・justify-endで右寄せ
になります
/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>
);
}
均等配置
/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>
);
}
4-7. GRID
4-7-1. テンプレート配置
左から右へ
/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>
);
}
上から下へ
grid-flow-colで指定より多い要素が来たら次の列に割り当てるように指示、grid-rows-4で要素4つまで行方向に並べるように指示のようにすると上から下に並べていくことができます
/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>
);
}
4-7-2. 幅を変える
col-span-2とすると横に2コマ分、row-span-3とすると縦に3コマ分表示できます
/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>
);
}
4-7-3. 隙間を空ける
col-startやcol-endを指定すれば隙間を空けて配置できます
/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>
);
}
4-7-4. 要素全体の配置
place-content
/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>
);
}
content
content-start, content-endなどで要素全体を片側に寄せることができます
https://tailwindcss.com/docs/align-content
/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>
);
}
4-7-5. justify-items
要素の幅に合わせたサイズで表示するとき、左寄せ、中央揃え、右寄せで表示することができます
全部一律で指定する
/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>
);
}
個別で1つずつ指定する
/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>
);
}
4-7-6. place-items
全部一律で指定する
/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>
);
}
個別で1つずつ指定する
/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>
);
}
4-8. レイアウト
4-8-1. 非表示
存在しなくする
/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>
);
}
非表示にする
/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>
);
}
4-8-2. float
/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>
);
}
4-8-3. columns
/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>
);
}
4-8-5. z-index
/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>
);
}
4-9. boarder
4-9-1. 角丸
四隅すべてを角丸にする
/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>
);
}
上下左右の2隅を指定して角丸にする
/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>
);
}
4隅の1つを指定して角丸にする
/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>
);
}
完全に角丸する
/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>
);
}
角丸を無効にする
親要素で角丸されていて、特定要素以下を無効にしたいときはrounded-noneで指定できます
/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>
);
}
4-9-2. 枠線の幅
四方を指定
/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>
);
}
上下、左右の二辺を指定
/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>
);
}
上下左右の1辺を指定
/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>
);
}
4-9-3. 枠線の色
/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>
);
}
4-9-4. 枠線のスタイル
/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>
);
}
4-9-5. outline
/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>
);
}
4-9-6. ring
/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>
);
}
4-10. 背景色
4-10-1. ベタ塗り
デフォルト色
/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>
);
}
カスタム色（値を指定）
<div class="bg-[#50d71e] ...">
<!-- ... -->
</div>
カスタム色（CSS変数を利用）
<div class="bg-(--my-color) ...">
<!-- ... -->
</div>
4-10-2. 透明度
/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>
);
}
4-10-3. グラデーション（線形）
/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>
);
}
4-10-4. グラデーション（円形）
/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>
);
}
4-10-5. グラデーション（コーン型）
/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>
);
}
4-10-6. 経由色や位置の設定
/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>
);
}
4-11. 背景画像
4-11-1. 貼る
静的な画像ファイル
bg-[url('画像のURL')] のように書くと、画像を貼り付けできます
インターネット上のURLでも、ローカルPATHでも指定できます
以下の場合は/public/bg_image.jtifを参照しています
<div className="w-full h-screen overflow-hidden bg-[url('/bg_image.jfif')] bg-cover bg-center bg-no-repeat">
動的に取得した画像ファイル
試してないですがAPIから受け取った画像を背景に置くことも出来るようです
<div
style={{'--image-url': `url(${fetchedUrl})`}}
className='bg-[image:var(--image-url)]'>
<!-- ... -->
</div>
4-11-2. スクロール設定
bg-fixed: 背景画像をスクロールしない
scroll: マウスカーソルが要素内にあるときはスクロールしない
local: スクロールする
/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>
);
}
4-11-3. 表示範囲
背景を貼る範囲を指定できます
/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>
);
}
4-11-4. 表示位置
表示範囲より大きい画像の場合に画像のどの位置を表示するか指定します
https://tailwindcss.com/docs/background-position
/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>
);
}
4-11-5. サイズ
bg-auto: 原寸
bg-cover: 短い辺が収まるように縮小
bg-contain: 長い辺が収まるように縮小
bg-size-[200px]: 長い辺が200pxになるように拡大縮小
/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>
);
}
4-12. エフェクト
4-12-1. opacity
/app/routes/home.tsx
<button class="bg-indigo-500 opacity-50 ...">Save changes</button>
4-12-2. box-shadow
/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>
);
}
4-12-3. text-shadow
/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>
);
}
4-12-4. 背景色を重ねる
/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>
);
}
4-12-5. 背景画像と色を重ねる
/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>
);
}
4-13. マスク
4-13-1. 画像をマスクする
/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>
);
}
4-13-2. マスクの合成
/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>
);
}
4-13-3. 画像を使ってマスクする
/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>
);
}
4-13-4. グラデーションでマスクする
上下左右からマスク
/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>
);
}
角度を指定する
角度を指定してマスクをかけることもできます
/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>
マスクを無効にする
<div className="mask-none bg-[url('/bg_image.jfif')]"></div>
4-13-5. 丸くマスクする
丸くマスクする
/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>
);
}
丸くマスクする（角や横辺基準）
角や横辺を基準に位置と大きさを設定できます
/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>
);
}
4-13-6. コーン型にマスクする
/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>
);
}
4-13-7. mode
明度で指定するか、透明度で指定するか選べます
mask-alpha: 透明な部分がマスクされます
mask-luminance: 明度の低い部分がマスクされます
mask-match: 画像の場合はalpha, それ以外ではluminanceになります
4-13-8. mask-origin
/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>
);
}
4-14. filter
4-14-1. blur
/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>
);
}
4-14-2. brightness
/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>
);
}
4-14-3. contrast
/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>
);
}
4-14-4. drop-shadow
/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>
);
}
4-14-5. hue-rotate
/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>
);
}
4-14-6. invert
/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>
);
}
4-14-7. saturate
/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>
);
}
4-14-8. sepia
/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>
);
}
4-14-9. backdrop-filter
要素の背後だけ限定して背景画像にフィルタをかけることができます
/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>
);
}
4-15. table
4-15-1. boader-collapse
/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>
</>
);
}
4-15-2. boader-spacing
/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>
</>
);
}
4-15-3. table-auto
table-autoにすると列幅を自動調整します
table-fixedにすると列幅が固定になります
/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>
</>
);
}
4-15-4. caption
caption-topでcaptionを表の上に表示
caption-bottomでcaptionを表の下に表示
/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>
</>
);
}
4-16. transition
4-16-1. transition-property
transitionを有効にする対象を指定します
デフォルトでは無効になっています
/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>
);
}
4-16-2. motion-reduce
OSがアニメーションを減らす設定になっている場合の挙動を指定して書くことができます
motion-reduce: で設定すると、アニメーションを減らす設定になっている場合の挙動を指定できます
motion-safe: で設定すると、アニメーションを減らす設定になっていない場合の挙動を指定できます
4-16-3. transition-discreate
transition-discreteにするとtransition-behavior: allow-discrete;に設定できます
4-16-4. transition-duration
ミリ秒単位でdurationを指定します
duration-initialにすると初期値である0ミリ秒になります
/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>
);
}
4-16-5. transition-timing
transitionのタイミング挙動を指定します
等速でじわっと変化させる場合はease-linear
最初ゆっくりで加速していく場合はease-in
最初速くて止まる前に減速していく場合はease-out
ゆっくり → 加速 → ゆっくりとするのがease-in-out
4-16-6. delay
transition開始までの遅れ時間をミリ秒で指定します
delay-300で300ミリ秒になります
4-16-7. アニメーション
よく使うようなtransitionアニメーションを一発指定できます
マジか
animate-spin
/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>
);
}
くるくる回ります
animate-ping
/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>
);
}
ピコピコさせます
animate-pulse
opacity 1～0.5 の間を交互に動かして鼓動感のあるアニメーションを付与します
/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
/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で書いたものを弾ませる挙動になります
4-17. transform
4-17-1. translate
平行移動します
斜め
translate-<数値>で左上～右下方向にシフトします
/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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90" />
<div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
</div>
</div>
</div>
</div>
);
}
斜め（比率）
X軸方向
Y軸方向
Z軸方向
/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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90" />
<div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset" />
</div>
</div>
</div>
</div>
</div>
);
}
4-17-2. rotate
回転します
角度指定
/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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90" />
<div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
</div>
</div>
</div>
</div>
);
}
マイナス角度で指定
/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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90" />
<div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
</div>
</div>
</div>
</div>
);
}
3次元回転
/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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90" />
<div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
</div>
</div>
</div>
</div>
);
}
4-17-3. scale
元のサイズを100として、拡大縮小します
scale-75: 75%サイズで表示
scale-100: 元のサイズと同じ
scale-150: 150％サイズで表示
/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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90" />
<div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
</div>
</div>
</div>
</div>
);
}
4-17-4. skew
/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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90" />
<div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
</div>
</div>
</div>
</div>
);
}
4-17-5. transform-origin
transformの基準点を指定できます
デフォルトではorigin-centerになっています
/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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&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&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90" />
<div className="absolute rounded-lg ring-1 ring-black/10 ring-inset" />
</div>
</div>
</div>
</div>
);
}
4-17-6. transform, transform-style
transformをGPUで実行するように指定できます
/app/routes/home.tsx
<div class="skew-y-3 transform-gpu">
<!-- ... -->
</div>
transformを無効にできます
/app/routes/home.tsx
<div class="skew-y-3 md:transform-none">
<!-- ... -->
</div>
4-17-7. transform-style
transform-3dとすると3D transformを有効にします
transform-flatとすると子要素の3D transformをすべて無効にします
/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>
);
}
4-17-8. backface-visibility
/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>
);
}
4-17-9. perspective
画角を変えて魚眼レンズっぽくしたりできます
/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>
);
}
4-17-10. perspective-origin
立体の基準点を設定できます
/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>
);
}
4-18. Interactivity
4-18-1. accent-color
チェックボックスのチェック色など、アクセントカラーを指定します
/app/routes/home.tsx
<label>
<input type="checkbox" checked />
Browser default
</label>
<label>
<input class="accent-pink-500" type="checkbox" checked />
Customized
</label>
4-18-2. appearance
appearance-none ブラウザ標準のappearanceスタイルを削除します
appearance-auto ブラウザ標準のappearanceスタイルを残します
4-18-3. caret-color
/app/routes/home.tsx
<textarea class="caret-pink-500 ..."></textarea>
4-18-4. color-scheme
scheme-dark 要素をダークモードで表示します
scheme-light 要素をライトモードで表示します
4-18-5. cursor
カーソルのスタイルを指定します
/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
field-sizing-fixed テキスト入力枠の大きさを固定します
field-sizing-content テキスト入力枠の大きさを文字数に合わせて変更します
4-18-7. pointer-events
pointer-events-auto クリックやhoverなどのポインターイベントを有効にします
pointer-events-none クリックやhoverなどのポインターイベントを無効にします
4-18-8. resize
要素のリサイズを許可するか否かを指定します
resize-none
resize
resize-y
resize-x
4-18-9. scroll-behavior
scroll-auto
scroll-smooth
4-18-10. scroll-margin
要素のID指定でスクロールするようなとき、ナビゲーションバーなどにめり込んでしまうことがあると思います。この際、scroll位置のmarginを設定できます
/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>
);
}
4-18-11. scroll-padding
scroll-marginの場合はスクロールする要素自身に設定しますが、scroll-paddingで書けば外側の要素に1回設定するだけで済みます
4-18-12. scroll-snap-align
スクロールをスナップする位置を指定します
snap-start
snap-end
snap-center
snap-align-none
/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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&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&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
/>
</div>
<div className="shrink-0 snap-center">
<div className="w-4 shrink-0 sm:w-37"></div>
</div>
</div>
</div>
</div>
);
}
4-18-13. scroll-snap-stop
snap-always スクロールを途中で止めてスナップします
snap-normal 通常通りのスナップにします
4-18-14. scroll-snap-type
snap-x 横方向（X軸）にスナップ
snap-y 縦方向（Y軸）にスナップ
snap-both 縦横両方にスナップ
snap-mandatory スナップ先がある場合は必ずスナップ
snap-proximity 近い時だけスナップ
4-18-15. 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
select-none 文字を選択させない
select-text 文字を選択できる
select-all クリックしたら文章全体を選択
select-auto
4-18-17. will-change
4-20. SVG
4-20-1. fill
SVGの塗りつぶし指定です
4-20-2. stroke
SVGの線の色指定です
4-20-3. stroke-width
線幅を指定します
4-21. アクセシビリティ
4-21-1. forced-color-adjust
ブラウザで強制ハイコントラストなどを設定している場合に
それを受け入れるか否かを指定します
まとめ
使ってない人からはいろいろ言われるTailwindですが
書いてると楽なので離れられなくなります
迷ってるようなら一度試してみてほしい