Tailwind CSSの導入&スタイリングのやり方

はじめに

今回は、この頃多く利用されているTailwind CSSの導入手順と基本的なスタイリングの仕方を記載していきたいと思います。
まだTailwind CSSに触れたことのない方は、参考にしてください！

ちなみに宣伝

弊社では、今回のようなフロントエンドの開発（React、Next.js、Vue.js、Nuxt等）関連のプロジェクトに興味のある方を絶賛募集中です。
（バックエンド、インフラ、ネイティブアプリ系の方ももちろん募集中です）

興味がある方は、ぜひ下記フォームに回答いただけますと幸いです！
👉 フォームはこちら

Tailwind CSSとは？

Tailwind CSSは、あらかじめ用意されたユーティリティクラスを組み合わせることで、迅速かつ柔軟にスタイリングを行うことができるCSSフレームワークです。従来のCSSフレームワークとは異なり、あらゆるスタイリングをユーティリティクラスで行うため、カスタマイズ性が非常に高く、プロジェクトごとのデザイン要件に柔軟に対応できます。

主な特徴

• ユーティリティファースト: 小さなユーティリティクラスを組み合わせてスタイルを構築
• カスタマイズ性: 設定ファイルを通じて、デザインシステムを自由にカスタマイズ可能
• レスポンシブデザイン: モバイルファーストの設計が容易
• プラグインエコシステム: 様々なプラグインを利用して機能を拡張可能

Tailwind CSSのメリット

1. 開発速度の向上

Tailwind CSSを使用することで、CSSファイルを一から書く必要がなくなり、既存のユーティリティクラスを組み合わせるだけでデザインを構築できます。これにより、スタイリングにかかる時間を大幅に短縮できます。

2. 一貫性のあるデザイン

ユーティリティクラスを使用するため、プロジェクト全体で一貫性のあるデザインを維持しやすくなります。特に大規模なプロジェクトやチーム開発において、デザインの統一が容易になります。

3. カスタマイズの容易さ

Tailwind CSSは設定ファイル（tailwind.config.js）を通じて、カスタムカラーやフォント、ブレイクポイントなどを簡単に定義できます。これにより、プロジェクトのデザイン要件に合わせた柔軟なカスタマイズが可能です。

4. レスポンシブデザインの簡素化

Tailwind CSSは、モバイルファーストのレスポンシブデザインを簡単に実装できるよう設計されています。ブレイクポイントごとのユーティリティクラスを使用することで、異なるデバイス向けのスタイリングが容易になります。

Tailwind CSSの導入方法

Tailwind CSSをプロジェクトに導入する方法はいくつかありますが、ここでは一般的なセットアップ手順を紹介します。以下の手順は、Node.js環境を前提としています。

1. プロジェクトのセットアップ

まずは、プロジェクトディレクトリを作成し、npmを使用して初期化します。

mkdir my-project
cd my-project
npm init -y

2. Tailwind CSSのインストール

次に、Tailwind CSSとその依存関係をインストールします。

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

3. Tailwind CSSの設定ファイルの編集

tailwind.config.jsファイルを開き、必要に応じてカスタマイズします。例えば、カスタムカラーを追加する場合は以下のように設定します。

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
  plugins: [],
};

4. PostCSSの設定

プロジェクトのルートにpostcss.config.jsファイルを作成し、以下の内容を追加します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

5. Tailwind CSSのインポート

CSSファイル（例: src/styles.css）を作成し、Tailwindのベース、コンポーネント、ユーティリティをインポートします。

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

6. CSSのビルド

package.jsonにビルドスクリプトを追加します。

"scripts": {
  "build:css": "postcss src/styles.css -o dist/styles.css"
}

次に、以下のコマンドを実行してCSSをビルドします。

npm run build:css

7. React + TypeScriptでの使用

ReactとTypeScriptを使用してTailwind CSSをプロジェクトに統合する場合は、下記のような手順を踏みましょう。（Reactプロジェクトは作成されている前提）

設定ファイルの修正

tailwind.config.jsファイルを編集し、Reactのファイルパスを含めます。

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

CSSファイルの設定

src/index.cssを以下のように編集し、Tailwindのディレクティブを追加します。

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

ReactコンポーネントでTailwind CSSを使う

// src/App.tsx
import React from 'react';

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded shadow-md w-96">
        <h1 className="text-2xl font-bold mb-4 text-primary">こんにちは、Tailwind CSS!</h1>
        <p className="text-gray-700 mb-6">
          Tailwind CSSを使用して効率的にスタイリングを行っています。
        </p>
        <button className="bg-primary text-white px-4 py-2 rounded hover:bg-blue-700">
          ボタン
        </button>
      </div>
    </div>
  );
}

export default App;

Tailwind CSSの実践的な使い方

Tailwind CSSを活用することで、効率的かつ柔軟なスタイリングが可能になります。以下に、実際の開発で役立つ具体的な例を紹介します。

1. レスポンシブナビゲーションバーの作成

<nav class="bg-primary p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-white text-xl font-bold">MyWebsite</a>
    <ul class="hidden md:flex space-x-4">
      <li><a href="#" class="text-white hover:text-gray-200">ホーム</a></li>
      <li><a href="#" class="text-white hover:text-gray-200">サービス</a></li>
      <li><a href="#" class="text-white hover:text-gray-200">お問い合わせ</a></li>
    </ul>
    <button class="md:hidden text-white">
      <!-- ハンバーガーメニューアイコン -->
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
</nav>

この例では、Tailwindのユーティリティクラスを使用して、レスポンシブなナビゲーションバーを簡単に作成しています。md:flexクラスにより、画面サイズが中サイズ以上の場合にメニューが表示され、小サイズではハンバーガーメニューが表示されます。

2. カードコンポーネントの作成

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://via.placeholder.com/400x200" alt="サンプル画像">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">カードタイトル</div>
    <p class="text-gray-700 text-base">
      これはTailwind CSSを使用して作成されたカードコンポーネントの例です。ユーティリティクラスを組み合わせて、簡単にスタイリングが可能です。
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#タグ1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#タグ2</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#タグ3</span>
  </div>
</div>

このカードコンポーネントでは、Tailwindのユーティリティクラスを使用して、画像、タイトル、テキスト、タグを効率的にスタイリングしています。クラスの組み合わせにより、柔軟で美しいデザインが簡単に実現できます。

3. グリッドレイアウトの作成

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-2">項目1</h2>
    <p class="text-gray-700">これはグリッドレイアウトの項目1です。</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-2">項目2</h2>
    <p class="text-gray-700">これはグリッドレイアウトの項目2です。</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-2">項目3</h2>
    <p class="text-gray-700">これはグリッドレイアウトの項目3です。</p>
  </div>
</div>

このグリッドレイアウトでは、Tailwindのgridクラスとレスポンシブなグリッドカラムクラスを使用して、異なる画面サイズに対応したレイアウトを簡単に作成しています。gap-4クラスにより、グリッドアイテム間のスペースを設定しています。

Tailwind CSSを活用するためのヒント

1. カスタムテーマの作成

Tailwind CSSは、設定ファイルを通じてカスタムテーマを簡単に作成できます。独自のカラーパレットやフォントを設定することで、ブランドに合わせたデザインを実現できます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3AB0FF',
          DEFAULT: '#0A74DA',
          dark: '#073A75',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

2. プラグインの活用

Tailwind CSSには、多数のプラグインが存在し、機能を拡張することができます。例えば、フォームのスタイリングやカスタムコンポーネントの追加など、必要に応じてプラグインを導入しましょう。

npm install @tailwindcss/forms

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

3. JITモードの利用

Tailwind CSSのJIT（Just-In-Time）モードを有効にすることで、ビルド時間の短縮や使用するクラスの自動生成が可能になります。これにより、開発効率がさらに向上します。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx,html}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

まとめ

Tailwind CSSは、効率的かつ柔軟なスタイリングを実現するための強力なツールです。ユーティリティファーストのアプローチにより、開発速度の向上と一貫性のあるデザインの維持ができます。

また、カスタマイズ性の高さや豊富なプラグインにより、様々なニーズに対応できます。

この記事を参考に、ぜひ一度Tailwind CSSを試して、その便利さと柔軟性を体験してみてください！

おわりに

繰り返しになりますが、弊社では、フリーランスエンジニアの方を募集しております！

熱意を持って新しいプロジェクトに挑戦したい方、様々な大規模開発プロジェクトに興味のある方は、下記フォームにてあなたの経歴をご回答ください！

👉 フォームはこちら

たくさんのご応募、お待ちしております！