我最近尝试用 React、TypeScript 和 TailwindCSS v4 搭建新项目，但遇到了 Tailwind 样式完全不生效的问题，想请教大家我哪里配置出错了😅

下面是我的完整操作流程：

• 初始化基础 React 项目：

  npx create-react-app web
  

• 安装 TypeScript 相关开发依赖（因为不想把 TypeScript 放到生产依赖里，所以没有用官方的 --template typescript 模板）：

  npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest
  npx tsc --init
  

• 安装 TailwindCSS v4 及 PostCSS 依赖：

  npm install --save-dev tailwindcss @tailwindcss/postcss postcss
  

按照 Tailwind v4 的配置指引，我在项目根目录（与 package.json 同级）创建了 postcss.config.mjs 文件，内容如下：

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

接着修改 src/index.css，删除所有默认样式，只保留 Tailwind 的导入语句：

@import "tailwindcss";

之后我把 App.js 重命名为 App.tsx，替换成测试用的样例代码：

function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}

export default App;

同时也把 src/index.js 改成了 src/index.tsx，适配 TypeScript 语法：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

现在运行 npm start 后，页面上的标题完全没有应用 Tailwind 的样式，实际效果如下：

我的项目依赖版本信息：

"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"tailwindcss": "^4.0.12",
"postcss": "^8.5.3",

请问我是不是漏掉了某个关键步骤？或者哪里的配置逻辑有问题？

备注：内容来源于stack exchange，提问作者Mafitsi