React项目编译成功但无样式及Div内容显示问题求助

问题背景 #

编译成功，但网页无法显示Div文本及Tailwind样式，相关代码如下：

App.js #

import React from "react";

const App = () => {
  return (
    <div className="w-screen h-screen bg-blue-400 flex justify-center items-center text-base font-bold">
      App
    </div>
  );
};

export default App;

index.js（原错误代码） #

import React from "react";
import ReactDOM from "react";

import "./index.css";
import App from "./App.js";

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

index.html（原错误代码） #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      </div>
    </div>
  </body>
</html>

index.css #

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

修复方案 #

1. 修正ReactDOM导入错误 #

index.js中错误地从react导入ReactDOM，需根据React版本修正：

• React 17及以下：

import React from "react";
import ReactDOM from "react-dom"; // 修正导入路径

import "./index.css";
import App from "./App.js";

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

• React 18+（推荐）：

import React from "react";
import ReactDOM from "react-dom/client"; // 修正导入路径

import "./index.css";
import App from "./App.js";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 修复HTML无效结构 #

index.html中id="root"的div存在多余闭合标签，删除后：

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

3. 验证Tailwind CSS配置 #

确保Tailwind已正确配置：

• 安装依赖：npm install -D tailwindcss postcss autoprefixer
• 初始化配置文件：npx tailwindcss init -p
• 在tailwind.config.js中添加内容路径：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

验证步骤 #

1. 重启开发服务器（npm start）
2. 检查浏览器控制台，确认无导入或DOM相关报错
3. 查看元素样式，确认Tailwind类已生效

内容的提问来源于stack exchange，提问作者Awodi