Tailwind 类在安装后无法与 React 一起使用

Question

tailwind css 类没有显示，我按照 tailwindcss.com create-react-app 的安装过程来安装它。交叉检查，我似乎找不到它仍然不起作用的原因。我确实按照与此问题相关的答案中的说明将反应脚本更新到版本 5.0.1，但它没有解决问题。

这是 package.json 文件

    {
  "name": "my-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.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"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24"
  }
}

Tailwind.config.js

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

索引.css

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

function App() {
    return <div className="container mx_auto bg-gray-200 rounded-xl">
            <p className="text-5xl font-bold">
                Welcome
            </p>
            <p className="text-grey-500 text-lg">
                    React and Tailwind css updated now 
            </p>

    </div>;
}

export default App;

Answer 1

也许这会对某人有所帮助。所以我遇到了这个问题，一切都从顺风的官方文档正确安装。但风格并没有得到体现。

当我说整个安装顺利时，我的意思是一切，例如配置中的内容，tailwindcss, postcss, autoprefixer并包括基本顺风

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

那时的风格index.css。

我的问题是我只需要使用以下命令更新反应脚本：

npm install react-scripts@latest

我以前的版本是2.x安装后5.x安装的，现在一切正常。

PS：顺风指令可以以任何一种方式添加，两种方式都适合我选项1（我已经选择了这个）

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

或选项 2

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";