🧳

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

2024/08/02に公開

React

留意事項

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
├── publick
│ ├── css
│ │ └── app.css
│ └──index.html
├── src
│ ├── css
│ │ ├── tailwind.css
│ │ └── sample.css
│ └── js
│ └── App.js
├── index.js
└── tailwind.config.js

0から始める手順

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

Reactを入れます

npm install react --saveを実行します

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を準備します

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

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

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>が抜けていた

/publick/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";