TL;DR
この記事では、Tailwind Just-in-Time（JIT）モードの実装について説明します。JIT モードを使用すると、[] ブラケット内に任意の値を直接指定できます。このモードにより、スタイルの柔軟性が増し、ページの読み込み速度も向上します。
Tailwind JIT モードは、実際にプロジェクトで使用されるクラスだけを生成するため、最終的な CSS ファイルサイズが小さくなります。
後述しますが、アコーディオンメニューも JavaScript を使わずに簡単に実装できます。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.4 |
| TypeScript | 5.0.4 |
| Tailwind | 3.3.3 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
設定
設定が必要な場合は、tailwind.config.js に以下のように記述します。
// tailwind.config.js
module.exports = {
mode: "jit",
purge: ["./src/**/*.{js,ts,jsx,tsx}"],
};
mode: 'jit'この行で JIT モードを有効にします。purge: ['./src/**/*.{js,ts,jsx,tsx}']この行では、どのファイルをスキャンするかを指定しています。
詳細は、Just-in-Time Mode - Tailwind CSSを参照してください。
html に記述する
html に記述する場合は、このようになります。直接数値を記述できるので、分かりやすいですね。
<!-- 任意のマージンを設定 -->
<div class="mt-[40px]"></div>
<!-- 任意の幅を設定 -->
<div class="w-[60%] sm:w-[100%]"></div>
<!-- var関数 -->
<div class="text-[var(--black)]"></div>
<!-- 自動マージンを設定 -->
<div class="m-auto"></div>
tsx に記述する
tsx に記述する場合は、このようになります。html と同じ記述です。
<div className="mt-[80px]">
<p>このテキストは上に80ピクセルのマージンがあります。</p>
</div>
複数のプロパティを指定する場合
改行しても反映されます。
<h4
className="
font-normal
text-[#333]
text-[1.4rem]"
>
XXXX
</h4>
border を指定します。
<div className="border-t-[1px] border-b-[1px] border-[var(--mid-gray)]"></div>
画像のアスペクト比を指定する
画像にアスペクト比やオブジェクトの位置を指定する場合は、このようになります。
<Image
src="/image/company/staff.jpg"
alt=""
width={800}
height={800}
className="
aspect-[1/1]
object-cover"
/>
Grid レイアウト
このコンポーネントは、子要素を 3 列のグリッドに配置する汎用的なレイアウトです。画面が小さい（smブレークポイント以下）場合は、1 列になります。グリッドの各アイテム間には 60 ピクセルのギャップが設定されています。全体の配置は中央になります。
type Props = {
children: React.ReactNode;
};
const MyGrid = ({ children }: Props) => {
return (
<div
className="
mt-[40px]
grid
grid-cols-3
sm:grid-cols-1
gap-[60px]
place-content-center"
>
{children}
</div>
);
};
export default MyGrid;
calc 関数を使う
自動計算も簡単です。
html
<!-- 幅を計算して設定 -->
<div class="w-[calc(100% - 16px)]"></div>
tsx
type Props = {
someValue: number;
};
const MyComponent = ({ someValue }: Props) => {
return (
<div className={`w-[calc(100% - ${someValue}px)]`}>{/* コンテンツ */}</div>
);
};
export default MyComponent;
疑似要素を使う
疑似要素を使う場合は、before: や after: を使います。before:content-['XXXX'] というように、content の値を指定します。
<li key={index} className="before:content-['-'] before:text-[1.2rem]">
{item}
</li>
var 関数を使う
CSS 変数を使用する場合、text-[var(--white)] のように指定することもできます。
<h3 className="text-center text-[var(--black)]">XXXX</h3>
アコーディオンメニュー
アコーディオンメニューを作成する際に、HTML の<summary>および<details>タグを使用すると、JavaScript なしで簡単に実装できます。以下はその一例です。
type AccordionProps = {
title: string;
content: string;
};
const Accordion = ({ title, content }: AccordionProps) => {
return (
<details className="border rounded overflow-hidden mb-4">
<summary className="bg-gray-200 p-4 cursor-pointer">{title}</summary>
<div className="p-4">{content}</div>
</details>
);
};
export default Accordion;
このAccordionコンポーネントはtitleとcontentというプロパティを受け取り、それぞれが<summary>と<div>タグの中に表示されます。<details>タグによってアコーディオンの開閉機能が自動で備わります。
このコンポーネントを使用するには以下のようにします。
const App = () => {
return (
<div>
<Accordion
title="Section 1"
content="This is the content for section 1"
/>
<Accordion
title="Section 2"
content="This is the content for section 2"
/>
{/* 他のコンポーネントや内容 */}
</div>
);
};
export default App;
動的なクラスの生成
動的にクラスを生成することができます。これは、React で UI を動的に制御する際に非常に有用です。
type ButtonProps = {
isActive: boolean;
};
const Button = ({ isActive }: ButtonProps) => {
const buttonClass = isActive ? "bg-blue-500" : "bg-gray-300";
return <button className={buttonClass}>Click Me</button>;
};