React.jsとTailwind CSSを使用したフォームの作成方法

必要なパッケージのインストール まず、Reactプロジェクトを作成し、Tailwind CSSを使用するために必要なパッケージをインストールします。以下のコマンドを使用してインストールします。

npx create-react-app my-app
cd my-app
npm install tailwindcss postcss autoprefixer

Tailwind CSSの設定 Tailwind CSSを使用するために、postcss.config.jsファイルを作成し、以下の内容を追加します。

module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};

CSSの設定 src/index.cssファイルを作成し、以下の内容を追加します。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

フォームコンポーネントの作成 src/App.jsファイルを編集し、以下の内容でフォームコンポーネントを作成します。

import React, { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// フォームの送信処理をここに追加する
// フォームのリセット
setName('');
setEmail('');
};
return (
<div className="container mx-auto mt-4">
  <form onSubmit={handleSubmit} className="max-w-md mx-auto">
    <div className="mb-4">
      <label htmlFor="name" className="block mb-2">名前</label>
      <input
        type="text"
        id="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        className="border p-2 w-full"
      />
    </div>
    <div className="mb-4">
      <label htmlFor="email" className="block mb-2">メールアドレス</label>
      <input
        type="email"
        id="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="border p-2 w-full"
      />
    </div>
    <button type="submit" className="bg-blue-500 text-white py-2 px-4">送信</button>
  </form>
</div>
);
}
export default App;

アプリケーションの実行 以下のコマンドを使用して、Reactアプリケーションを起動します。

npm start