Tailwind 类在安装后无法使用 react答案

【问题标题】：Tailwind classes not working with react after installationTailwind 类在安装后无法使用 react
【发布时间】：2022-11-04 17:43:10
【问题描述】：

未显示 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;

【问题讨论】：

您是否在任何地方导入index.css？
在 app.js 中导入 index.css 并且它起作用了。谢谢

标签： reactjs tailwind-css tailwind-3

【解决方案1】：

从 devDependencies 卸载 tailwind ... npm uninstall <name of the modules> --save-dev。
安装 Tailwind依赖关系,不是 devDependencies（没有-D）
```
npm install tailwindcss postcss autoprefixer
```
1. 遵循官方文档的其余部分。
我已经练习了 7 个月，它的工作原理是这样的

【讨论】：

【解决方案2】：

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

当我说整个安装顺利时，我的意思是一切，比如配置中的内容，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";

【讨论】：