スタイリング

スタイリングはウェブアプリケーションの重要な部分であり、Remix では CSS モジュールや外部スタイリングライブラリを簡単に統合できます。このセクションでは、CSS モジュールの使用方法と Tailwind CSS の統合方法を、具体的な例を交えて説明します。

CSS モジュールの使用

CSS モジュールを使用すると、スタイルのスコープをローカルに限定し、クラス名の衝突を防ぐことができます。

ステップ 1: CSS モジュールファイルの作成

• app/stylesディレクトリ内にButton.module.cssファイルを作成します。

/* Button.module.css */
.button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

ステップ 2: CSS モジュールのインポートと使用

• CSS モジュールをコンポーネントでインポートし、スタイルを適用します。

// app/routes/index.jsx
import styles from '~/styles/Button.module.css';

export default function Index() {
  return (
    <div>
      <button className={styles.button}>ボタン</button>
    </div>
  );
}

Tailwind CSS の統合

Tailwind CSS は、ユーティリティファーストの CSS フレームワークであり、Remix プロジェクトに簡単に統合できます。

ステップ 1: Tailwind CSS のインストール

• ターミナルを開き、以下のコマンドを実行して Tailwind CSS とその依存関係をプロジェクトに追加します。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• これにより、tailwind.config.jsとpostcss.config.jsがプロジェクトのルートに生成されます。

ステップ 2: Tailwind の設定

• tailwind.config.jsで、必要に応じてテーマをカスタマイズします。

ステップ 3: Tailwind の適用

• グローバルスタイルシート（例: app/styles/global.css）に Tailwind ディレクティブを追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

• このスタイルシートをapp/entry.client.jsxまたはapp/root.jsxでインポートします。

import '~/styles/global.css';

ステップ 4: Tailwind クラスの使用

• コンポーネントで Tailwind クラスを使用してスタイリングします。

export default function Index() {
  return (
    <div className='p-4 max-w-xl mx-auto'>
      <h1 className='text-xl font-bold'>ホームページ</h1>
      <p className='mt-2 text-gray-700'>Remixアプリへようこそ！</p>
      <button className='mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700'>
        ボタン
      </button>
    </div>
  );
}