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: [],
}

index.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"; 

Answer 2

1. 从 devDependencies 卸载 tailwind ...

   npm uninstall <name of the modules> --save-dev

   。

2. 在 dependency 上安装 Tailwind，不是 devDependency（不带

   -D

   ）

npm install tailwindcss postcss autoprefixer

3. 遵循官方文档的其余部分。

我已经练习了7个月了，效果就是这样

Answer 3

你可以试试这个：

npm install postcss-flexbugs-fixes postcss-normalize postcss-preset-env

我遇到了同样的问题，这条线帮助了我。

Answer 4

1- 确保在项目内安装 tailwind。 2-配置模板路径=> 在 tailwind.config.js 文件中添加所有模板文件的路径。

3- 确保 tailwind 及其版本安装正确。

4- 将 Tailwind 指令添加到您的 CSS 中 将 @tailwind 指令添加到每个 Tailwind 层的 ./src/index.css 文件中。完全从第一行开始，位于所有其他代码之前。

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