【備忘録】React + Tailwind Cssの導入

React学習中にTailwind Cssを導入しましたが、上手く反映されずとても苦戦したので、備忘録として投稿します。

■はじめに

Reactの構文やtailwind Cssの設定に関する細かい説明は記載しません。
とりあえずTailwind CssをReact環境で利用できるようにしたい人向けのようになっています。

不要なところや、間違っているところがあれば教えて頂きたいです。💦

■開発環境

■Mac book Pro：　macOS Monterey - Version 12.6

■VSCode：　1.73.0

■npm：　verion 8.16.0

■Node.js：　v14.17.4

■Package.json（Tailwind Css他全てインストール後）

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "init": "^0.1.2",
    "node-sass": "^7.0.3",
    "npx": "^10.2.2",
    "postcss": "^8.4.19",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.8.2",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "tailwindcss": "^3.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

最終的なディレクトリ構成は以下の通り。

root/
 ├─ node_modules/
 │
 ├─ public/
 │     └ index.html
 │
 ├─ src/
 │   └ index.js
 │   └ App.js
 │   └ TailwindCss.jsx
 │   └ input.css
 │   └ output.css
 │
 ├─ package.json
 └─ tailwind.config.js

■Reactの環境構築

以下のコマンドで、Reactプロジェクトを作成。

npx create-react-app ${ プロジェクト名 } 
cd ${ プロジェクト名 }

次にsrcの中身を一度全て削除し、新たにコンポーネントとCssファイルを作成。

■TailwindCss.jsx

export const TailwindCss = () => {
    return (
        <div>
            <p>tailwind Cssです</p>
            <button>ボタン</button>
        </div>
    );
};

■input.css

/*-- この地点では一旦空。 --*/

■Tailwind Cssの環境構築

以下のコマンドで、Tailwindcss、postcss、autoprefixerをインストール。

npm install -D tailwindcss postcss autoprefixer 

次に、以下のコマンドで設定ファイルを生成します。

npx tailwindcss init -p

コマンド実行後、tailwind.config.jsが生成されます。

生成されたファイルに以下を記載します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {

  // content内に、CSS対象とするファイルを設定する。
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

■実行に向けて

index.cssに以下を記載。

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

※VSCodeで実際に書くと@tailwindの箇所でエラー(？)のようになるが無視で良い。

TailwindCss.jsxで、追加したいcssのclassNameを記載します。
その際、cssをインポートするのを忘れず記載すること。

※output.cssは後ほど作成。

import "./output.css"

export const TailwindCss = () => {
    return (
        <div className="border border-gray-400 rounded-2xl p-2 m-2 flex justify-around items-center">
            <p className="m-0 text-gray-400">tailwind Cssです</p>
            <button className="bg-gray-300 border-0 p-2 rounded-md hover:bg-gray-400 hover:text-white">ボタン</button>
        </div>
    );
};

App.jsxを作成します。

import { TailwindCss } from "./TailwindCss";

export const App = () => {

    return <TailwindCss></TailwindCss>;
}

index.jsを作成します。

import ReactDOM from "react-dom";
import { App } from "./App"

ReactDOM.render(<App />, document.getElementById("root"));

※document.getElementById("root")　は、
publicディレクトリ内のindex.htmlにある id="root" の箇所にレンダリングするため。

以下のコマンドを実行し、input.cssをビルド。

npx tailwindcss -c ./tailwind.config.js -i ./src/input.css -o output.css

これを実行することにより、output.cssが作成される。

以上で環境構築は完了。

npm start

上記コマンドを実行すると、以下のようなhtmlが画面に表示される。

※他のCSS（独自のCSS）を併用して実行していると、Tailwind Cssのクラスが他のものにも実装されてしまい、スタイルが崩れたり反映されなかったりしてしまうので、併用するのはあまりお勧めしない。

参考文献

使用参考書