ReactでTailwind CSSを使用したタブの作成方法

方法1: React Hooksを使用した基本的な方法

React Hooksを使用して、タブを作成する基本的な方法を紹介します。まず、必要なパッケージをインストールします。

npm install react react-dom tailwindcss

次に、以下のコードを含む新しいReactコンポーネントを作成します。

import React, { useState } from 'react';
const Tab = () => {
  const [activeTab, setActiveTab] = useState(0);
  const handleTabClick = (index) => {
    setActiveTab(index);
  };
  return (
    <div className="flex">
      <button
        className={`py-2 px-4 mr-2 ${activeTab === 0 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        onClick={() => handleTabClick(0)}
      >
        タブ1
      </button>
      <button
        className={`py-2 px-4 ${activeTab === 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        onClick={() => handleTabClick(1)}
      >
        タブ2
      </button>
    </div>
  );
};
export default Tab;

上記のコードでは、useStateフックを使用してactiveTabという状態変数を管理しています。handleTabClick関数は、タブがクリックされたときにactiveTabを更新します。ボタンのクラス名は、activeTabの値に基づいて動的に設定されます。

方法2: Reactコンポーネントを使用した拡張可能な方法

Reactコンポーネントを使用して、より拡張可能なタブを作成する方法もあります。以下に、コードの一部を示します。

import React, { useState } from 'react';
const Tab = ({ tabs }) => {
  const [activeTab, setActiveTab] = useState(0);
  const handleTabClick = (index) => {
    setActiveTab(index);
  };
  return (
    <div className="flex">
      {tabs.map((tab, index) => (
        <button
          key={index}
          className={`py-2 px-4 ${activeTab === index ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
          onClick={() => handleTabClick(index)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
};
export default Tab;

これらはReactでTailwind CSSを使用してタブを作成する一般的な方法の一部です。他にもさまざまな方法がありますが、ここでは基本的な例を提供しました。必要に応じて、これらの方法を拡張してカスタマイズすることができます。