ChatGPTを使用したアプリ開発記【TailwindCSSを使用してUIを改修】

1. TailwindCSSをインストール

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
touch postcss.config.js

2.TailwindCSSのスタイルをインポート

src/index.css

@tailwind base;
@tailwind component;
@tailwind utilities;

3. TailwindCSSの設定ファイル（tailwind.config.js）の編集

デフォルトでは、Tailwindはすべてのファイルにスタイルを適用します。Reactコンポーネントやindex.htmlにもスタイルを適用するため、tailwind.config.jsのcontent配列を編集して、スタイルを適用するファイルのパスを指定します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        audiowide: ['Audiowide', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

4.投稿画面の改修

App.js

// アプリ名のフォント
<h1 className="font-audiowide text-3xl">Tomomitsu Keruma SNS</h1>

// フォームのデザイン
<form onSubmit={handleSubmit} className="bg-white p-4 rounded shadow-md space-y-4">

//ボタンのデザイン
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded-2xl hover:bg-blue-600 transition duration-200 shadow-md"
        >
          投稿する
        </button>

UI