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

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

<br>
<br>

# ■はじめに
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他全てインストール後）
```javascript
{
  "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"
    ]
  }
}

```

<br>

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

<br>


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

<br>

# ■Reactの環境構築


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

<br>

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

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

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

■input.css
```css
/*-- この地点では一旦空。 --*/
```

# ■Tailwind Cssの環境構築

以下のコマンドで、Tailwindcss、postcss、autoprefixerをインストール。
```
npm install -D tailwindcss postcss autoprefixer 
```
<br>
<br>

次に、以下のコマンドで設定ファイルを生成します。
```
npx tailwindcss init -p
```
コマンド実行後、`tailwind.config.js`が生成されます。

<br>
<br>

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

tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {

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

# ■実行に向けて

index.cssに以下を記載。
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

<font color="red">※VSCodeで実際に書くと`@tailwind`の箇所でエラー(？)のようになるが無視で良い。</font>

<br>
<br>

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

※output.cssは後ほど作成。

```javascript
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`を作成します。
```javascript
import { TailwindCss } from "./TailwindCss";

export const App = () => {

    return <TailwindCss></TailwindCss>;
}
```
`index.js`を作成します。

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

ReactDOM.render(<App />, document.getElementById("root"));
```
**※document.getElementById("root")**　は、
publicディレクトリ内のindex.htmlにある **id="root"** の箇所にレンダリングするため。

<br>
<br>
<br>

以下のコマンドを実行し、input.cssをビルド。
```
npx tailwindcss -c ./tailwind.config.js -i ./src/input.css -o output.css
```
<font color="red">これを実行することにより、`output.css`が作成される。</font>

<br>
<br>

以上で環境構築は完了。
```
npm start
```
上記コマンドを実行すると、以下のようなhtmlが画面に表示される。

![スクリーンショット 2022-11-12 16.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/a9a0d381-5dd3-3c82-01ad-eb8f9b47ea86.png)

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

# 参考文献

https://stackoverflow.com/questions/74156653/tailwind-gives-error-message-error-postcss-plugin-postcss-flexbugs-fixes-requir

https://tailwindcss.com/docs/configuration

https://yoheiko.com/blog/tailwind-css%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%A8%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95-jit%E3%82%82%E8%A7%A3%E8%AA%AC/

https://ouni.work/blog/react-tailwind-css/

https://www.twilio.com/blog/style-your-website-with-tailwind-css-jp

https://github.com/ethand91/react-typescript-tailwind/blob/master/src/App.tsx

https://yoheiko.com/blog/tailwind-css%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%A8%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95-jit%E3%82%82%E8%A7%A3%E8%AA%AC/


# 使用参考書

https://www.amazon.co.jp/%E3%83%A2%E3%83%80%E3%83%B3JavaScript%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B-React%E5%AE%9F%E8%B7%B5%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C-Informatics-IDEA/dp/481561072X