ReactアプリにTailwind CSS導入

Tailwind CSS導入する理由

CSSでデザインを付けていくと、微調整等に時間を費やしてしまうことがあるが、フレームワークを使用することで開発効率があげられるため。

導入手順

1.ターミナルを起動し、以下コマンドでReactアプリを作成

npx create-react-app react-tailwind-css

２．作成したReactアプリのホームディレクトリへ遷移

cd react-tailwind-css

3.Tailwind CSSを使用するために必要なライブラリをインストールする

npm install -D tailwindcss postcss autoprefixer

4.tailwind.config.js と tailwind.config.jsを作成する

npx tailwindcss init -p

４．のコマンドを実行することで、Reactアプリにtailwind.config.jsとtailwind.config.jsファイルが作成されたことが確認できるはずです。

5.tailwind.config.jsファイルの「content」部分にTailwind CSSを反映させたいファイルを指定する

/** @type {import('tailwindcss').Config} */
module.exports = {
  content:[
    "./src/***.jsx",
    "./src/***.jsx",
],
  theme: {
    extend: {},
  },
  plugins: [],
}

6../src/index.cssに以下の各レイヤーのディレクティブを追加

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

７．以下コマンドでReactアプリを起動

npm run start

８．Reactアプリで Tailwind CSSを使用する

export default function App() {
  return (
    <h1 className="mt-10 text-5xl underline underline-offset-4">
      Hello world!
    </h1>
  )
}

付けたいstyle記載方法がわからなければ、
参考資料の公式ページ、検索欄から付けたいstyleを検索すると記載方法がわかります！

参考資料

https://tailwindcss.com/docs/guides/create-react-app