TL;DR

このページでは、Tailwind CSS の基礎的な使い方について解説します。Tailwind は効率的で拡張性の高い CSS フレームワークです。

Tailwind CSS とは？

Tailwind CSS は、スタイリングを効率的に行える CSS フレームワークです。HTML タグ内に、規定の短いクラスを追加するだけで、多くのスタイルを適用できます。クラス名は直感的なので、CSS を書いたことがある方なら、すぐに使い方を覚えられます。

<div className="bg-blue-500 text-white p-4">
  これは Tailwind の基本的な使い方です。
</div>

この例では、bg-blue-500 で背景色を青、text-white で文字色を白、p-4 でパディングを 4 に設定しています。

とはいっても、数値が少し分かりづらい。そもそもp-4って、何ピクセルなの？と思いませんか？

JIT モードで直接数値を指定できる

そんな方には、JIT モードがおすすめ。[] で囲んで直接数値を指定できます。これが便利過ぎるんですね。

<div className="mt-[80px]">
  <p>このテキストは上に80ピクセルのマージンがあります。</p>
</div>

この例では、mt-[80px] で上側（top）のマージンを 80 ピクセルに設定しています。

margin-bottom: 120px を適用したいなら、mb-[120px] と書けば OK です。

さらに、これを変数に入れて何度も再利用できます！

どうでしょうか？これなら、直感的に分かりやすいですよね？

設定方法：Just-in-Time Mode - Tailwind CSS

※ 後述しますが、@apply ディレクティブを使えば、Tailwind CSS で提供されるユーティリティクラスをまとめて、カスタム CSS クラスを作成することができます。

命名規則

Tailwind CSS では多くの CSS プロパティに対して短縮した命名規則が用いられています。これにより、より短いクラス名で同じスタイルを適用でき、効率的なコーディングが可能です。以下は、いくつかの一般的な命名規則の例です。

このように、新たに覚えることも少ないので、すぐに使いこなせると思います。

チートシート

公式のチートシートが検索しやすくて便利です。まずは、こちらから目的のスタイルを探してみてください。

Tailwind CSS Cheat Sheet

こちらは、コンポーネント集です。コピペするだけで美しい UI を作ることができます。

Tailwind CSS Components

メリット

そもそも、なぜ フロントエンドエンジニアは、Tailwind CSS を使うのでしょうか？

Tailwind CSS を使うと、次のようなメリットがあります。

• CSS を手動で書く必要が少なくなり、デザイン変更が迅速に行える
• 既存のコンポーネント集から直接コピペして使える
• 独自のクラス名を考える手間が省けるため、開発速度が向上する
• クラス名が多くて見づらい場合は、変数に格納して使い回すことができる
• オンラインで利用できる網羅的なチートシートが便利
• scss や css ファイルを開かなくてもスタイリングが可能
• CSS の重複を減らすことで、コードの保守性が向上する

このように CSS を書くストレスを解消してくれるので、フロントエンドエンジニアにとっては非常に便利なツールです。まさに「CSS に時間をさきたくない」「TypeScript に集中したい」という方におすすめ。

基本的なスタイリング

Next.js での、基本的なスタイリングの例です。

// Button.tsx

type Props = {
  label: string;
};

const Button = ({ label }: Props) => {
  return (
    <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
      {label}
    </button>
  );
};

このコードでは、Button コンポーネントを作成しています。className 属性に指定されたクラスが Tailwind のスタイリングに対応しています。

• bg-green-500: 背景色を緑に設定
• hover:bg-green-700: ホバー時の背景色をより濃い緑に設定
• text-white: 文字色を白に設定
• font-bold: 文字を太字に設定
• py-2 px-4: 上下に 2、左右に 4 のパディングを設定
• rounded: 角を丸く設定

ユーティリティファーストとは

ユーティリティファーストとは、基本的なスタイルを短いクラス名で表現し、HTML 内で直接指定する考え方です。

// Example.tsx

type Props = {
  text: string;
};

const Example = ({ text }: Props) => {
  return <p className="text-xl md:text-2xl">{text}</p>;
};

この例では、text-xl で通常の文字サイズを大きく、md:text-2xl で中サイズの画面でさらに大きくしています。

動的なスタイリング

Tailwind では JavaScript を使って動的にスタイリングできます。この特性は、React と非常に相性が良いです。

// DynamicExample.tsx

type Props = {
  isActive: boolean;
};

const DynamicExample = ({ isActive }: Props) => {
  const buttonStyle = isActive ? "bg-blue-500" : "bg-red-500";

  return (
    <button className={`${buttonStyle} text-white font-bold py-2 px-4 rounded`}>
      Click Me
    </button>
  );
};

この例では、isActive プロパティによってボタンの背景色を動的に変更しています。

Just-in-Time Mode

[] ブラケットを用いて Tailwind CSS のグリッド列や行を数値で直接指定する方法もあります。この機能は Just-in-Time (JIT) モードで特に有用です。

Tailwind CSS の Just-in-Time (JIT) モードでは、ブラケット内に直接数値や CSS 変数を指定することができます。この機能を利用すると、非常に柔軟なスタイリングが可能です。

mt-[80px] の例

mt-[80px] は、上側（top）のマージンを 80 ピクセルに設定します。

const MarginExample = () => {
  return (
    <div className="mt-[80px]">
      <p>このテキストは上に80ピクセルのマージンがあります。</p>
    </div>
  );
};

text-[var(--white)] の例

CSS 変数を使用する場合、text-[var(--white)] のように指定することもできます。

type Props = {
  text: string;
};

const TextColorExample = ({ text }: Props) => {
  return (
    <div style={{ "--white": "#ffffff" }} className="text-[var(--white)]">
      {text}
    </div>
  );
};

特定のピクセル数で列幅を指定することもできます。

type Props = {
  items: string[];
};

const PixelGridLayout = ({ items }: Props) => {
  return (
    <div className="grid grid-cols-[100px,auto,200px] gap-4">
      {items.map((item, index) => (
        <div key={index} className="bg-gray-300 p-4">
          {item}
        </div>
      ))}
    </div>
  );
};

この例では、grid-cols-[100px,auto,200px] というクラスで、各列の幅をピクセルで指定しています。第一列は 100px、第二列は自動（auto）、第三列は 200px となります。

Grid レイアウト

Grid Layout も簡単に実装できます。grid クラスを親要素に適用し、子要素に対しては grid-cols-* や grid-rows-* のようなクラスを使用します。

// GridLayout.tsx

type Props = {
  items: string[];
};

const GridLayout = ({ items }: Props) => {
  return (
    <div className="grid grid-cols-3 gap-4">
      {items.map((item, index) => (
        <div key={index} className="bg-gray-300 p-4">
          {item}
        </div>
      ))}
    </div>
  );
};

この例では、grid クラスでグリッドレイアウトを指定し、grid-cols-3 で 3 列のグリッドを生成しています。gap-4 は各アイテム間のギャップを設定しています。

レスポンシブデザイン

Tailwind CSS では、レスポンシブデザインも容易に実現できます。

// ResponsiveGrid.tsx

type Props = {
  items: string[];
};

const ResponsiveGrid = ({ items }: Props) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {items.map((item, index) => (
        <div key={index} className="bg-gray-300 p-4">
          {item}
        </div>
      ))}
    </div>
  );
};

この例では、grid-cols-1 md:grid-cols-3 lg:grid-cols-4 といったクラスを使って、デバイスの画面サイズに応じた柔軟なグリッドレイアウトを実現しています。

ネストされたグリッド

グリッド内部に別のグリッドを配置するネストも可能です。

// NestedGrid.tsx

type Props = {
  items: string[][];
};

const NestedGrid = ({ items }: Props) => {
  return (
    <div className="grid grid-cols-2 gap-4">
      {items.map((subItems, index) => (
        <div key={index} className="grid grid-cols-2 gap-2">
          {subItems.map((item, subIndex) => (
            <div key={subIndex} className="bg-gray-300 p-4">
              {item}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

この例では、親のグリッドが grid-cols-2 で 2 列、各子のグリッドが grid-cols-2 でさらに 2 列となっています。

以上が、React と Tailwind CSS を用いたグリッドレイアウトの基本的な使い方です。Tailwind は短いクラス名で多くのスタイリングオプションを提供するため、グリッドレイアウトも非常に簡単に設定できます。

@apply

@apply ディレクティブは、Tailwind CSS で提供されるユーティリティクラスをまとめて、カスタム CSS クラスを作成するための強力な機能です。これにより、プロジェクト内で再利用可能なコンポーネントスタイルを効率的に定義することができます。

@apply の基本的な使い方は簡単です。CSS ファイル内で、新しいクラス名を定義し、その後に @apply ディレクティブを続け、適用したい Tailwind のユーティリティクラスを指定します。

.my-button {
  @apply bg-blue-500 text-white py-2 px-4 rounded;
}

この例では、.my-button クラスが定義され、それに bg-blue-500、text-white、py-2、px-4、rounded といった Tailwind のユーティリティクラスが適用されます。

制限と注意点

@apply ディレクティブは非常に便利ですが、すべてのユーティリティクラスが使用できるわけではありません。例えば、hover:、focus: などの状態クラスや、group-hover: などの依存クラスは @apply で直接使用することはできません。

プラクティカルな例

Next.js や他の React フレームワークで @apply を使用する場合、CSS モジュールやスタイルドコンポーネントと組み合わせて使うことが多いです。

/* styles/Button.module.css */
.button {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

import styles from "./Button.module.css";

const Button = ({ label }) => {
  return <button className={styles.button}>{label}</button>;
};

このように、@apply ディレクティブはコードの可読性を高め、再利用可能なカスタムスタイルを短時間で作成する際に大変役立ちます。