🧳

ReactとTailwindCSSとMUIで環境を作ってみる

2024/08/02に公開

1件

留意事項

React初学者が「とりあえず動かせればええんよ」と初めて作った環境のため、ちゃんと整備されていない感が否めません。
今後の学習次第で環境を詰めていく予定です。

いい感じで効率よくサイトを作ってみたい...

Reactでコンポーネントベースで進めれたらいいなぁ...
余白のCssごちゃつくのが嫌だからTailwindCSS入れたいなぁ...
あわよくばボタンとかカードレイアウトでMUI入れたいな...

という願望で作ってみました。

環境のバージョン

OS : macOS Sonoma 14.2.1
React : 18.3.1
React-dom :18.3.1
MUI（Material-UI） : 5.11.12
tailwindcss: 3.4.7

インストール関連

ディレクトリ構造はこちら

ディレクトリ

pj_react
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── css
│ │ └── app.css
│ └──index.html
├── src
│ ├── css
│ │ ├── tailwind.css
│ │ └── sample.css
│ └── js
│ └── index.js
│ └── App.js
└── tailwind.config.js

0から始める手順

ディレクトリを用意します
ターミナルで作成ディレクトリまで移動してnpm initを実行します
最後までYesかenter押しまくるとpackage.jsonが作成されます
srcとpublicのディレクトリを作ります
srcの中にjsとcssのディレクトリを作成し、cssのディレクトリの中にtailwind.cssのファイルを準備します
publicディレクトリの中にindex.htmlを用意します（最低限bodyタグまでは欲しい）

Reactを入れます

npm install react --save
npm i @types/react
npm install react-router-dom
npm i typescript
npm i loader-utils
npm i @types/react-dom
npm i react-scripts

一個づつ書いていますが、これらをインストールします。

MUIを入れます

npm install @mui/material @emotion/react @emotion/styled @mui/icons-materialを実行します

Tailwind.CSSを入れます

npm install -D tailwindcss postcss autoprefixerを実行します
npx tailwindcss init -pでtailwind.config.jsとpostcss.config.jsを準備します

それぞれのファイルの設定

長いので一部カットしていますが

テンプレート

/src/index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./js/App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

/src/js/App.js

import { useState } from "react";
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import "../css/tailwind.css";

import TopPage from './page/TopPage'; 

export default function App() {
  return(
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<TopPage />} />
      </Routes>
    </BrowserRouter>
  );
}

/public/index.html

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sample</title>
</head>
<body>
<h1>test</h1>
<div id="root"></div>
</body>
</html>

package.jsonでやっていること ※最終的な記述

"scripts": {
    "start": "NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js start",
    "build": "react-scripts build",
    "dev": "tailwindcss -i ./src/css/sample.css -o ./dist/app.css --watch"
  },

これで
npm run start、npm run build、npm run devでコマンドを実行することができます

scriptの書き方で以下のもので実行しようとするとパスが通ってない影響でエラーが出ます

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },

エラー

> sample_reproject@1.0.0 start
> react-scripts start

sh: react-scripts: command not found

変更前

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },

変更後
→package.jsonでやっていること ※最終的な記述を参照

エラー2

上記の最終的なパスに直しても次のようなエラーが出る場合は

> sample_reproject@1.0.0 start
> NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js start

sh: node_modules/react-scripts/bin/react-scripts.js: No such file or directory

次のコマンドを実行してください

npm i react-scripts

再度実行後に以下の内容を聞かれた場合Yを押してください

We're unable to detect target browsers.
Would you like to add the defaults to your package.json?

この時、ターミナルが「Google Chromeをコントロールしようとしているが許可して良いか?」と聞かれたので許可を押すとローカルホストが起動しました

tailwind.cssの記述

公式のまんまです

@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.css

tailwind.config.jsの記述

module.exports = {
  purge: {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    options: {
      safelist: {
        standard: [/^bg-/, /^text-/],
      },
    },
  },
  theme: {
      extend: {},
  },
  plugins: [],
}

Nuxt.jsの場合はcontentのディレクトリ名をAppにしないとエラーが出るそうです。

postcss.config.jsの記述

公式のまんまです

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

追記するもの

src/js/App.jsの中

// MUIの読み込みたいコンポーネントを記載していきます
import { Button, Paper, TextField } from '@mui/material';

// 自分で書く用のCSSを読み込みます
import "../css/sample.css";

// TailwindのCSSを読み込みます。これがないとtailwindを書いても反応しないです
import "../css/tailwind.css";

つんのめり集

ReactでAppの中に書いたDOM要素が表示されない

原因

<div id="root"></div>が抜けていた

/public/index.html

▼修正前

<!-- head省略 -->
<body>
</body>

▼修正後

<!-- head省略 -->
<body>
  <div id="root"></div>
</body>

Tailwindを使いたいが、全く効かない

src/js/App.js

export default function App() {
  return (
    <div className="App">
      <h1 className="w-80 p-3">サンプル</h1>
    </div>
  );
}

ReactのDOMの内容は表示されているし、Tailwindのクラスの書き方に問題はない
postcssは入れているし、tailwind.confも問題ない

どこに原因があるのかと思い、cssファイルの読み込み状態を確認

src/js/App.js
▼修正前

import { useState } from "react";
import "../css/sample.css";

▼修正後

import { useState } from "react";
import "../css/sample.css";
import "../tailwind.css";

原因

tailwind.cssが読み込まれていなかったので追記

Discussion

とり天こっこちゃん

 (追記：2024-10-30)環境整えている時にここで出ているエラーに遭遇したのですが
npm i react-scriptsをしても解決しなかったので以下の手順を踏みました。

 状況npm run startを実行する

↓

No such file or directoryのエラーが出る

↓

npm i react-scriptsを実行する

↓
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve

〜以降バージョン云々〜
 Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
などのエラーが出る

npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
↓

今ここ

 原因これはインストールしたパッケージのバージョンはそれぞれ最新とかで入ったりするが、そのバージョンの組み合わせが合わないがためにエラーが起きている....

という状態です。

 解決方法解決方法は3つあります

 方法1 依存関係をスキップするエラー文章の最後にも書かれてありますが方法が

npm install react-scripts --legacy-peer-depsを実行する

 方法2 TSのバージョンを下げる私の環境ではv6でしたのでv4に下げる...ということになります。

ここは環境によって異なるのでエラーの内容を確認してみてください。
npm uninstall typescript
npm install typescript@4.9.5

 方法3 --forceをつける--forceは力技だなと思っている私がいます。

予期せぬ動作を起こしたりするのでここは最終手段なのかなと思っていますが、極力使いたくないです....
npm install react-scripts --force

 どの方法で解決したか方法2でバージョンを下げてみる...という方法がアンパイだなと思い実行。

改めてnpm i react-scriptsを実行するとエラー出ませんでした。
バージョン周りのエラーが出た場合はまず下げてみる、というのが定石かもしれないと改めて思いました