Tailwind CSS 类无法与 React 一起使用，错误“您需要启用 JavaScript 才能运行此应用程序...”

Question

Talwind CSS 不适用于 React。我已经按照文档（https://v1.tailwindcss.com/docs/installation）安装了 Tailwind CSS，我的代码如下。

有人能帮我吗？

这是我的浏览器检查图片，以了解我的问题

这是我的 package.json 文件

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "autoprefixer": "^10.4.2",
    "postcss-cli": "^9.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "tailwindcss": "^3.0.18",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/style.css",
    "start": "npm run build:css && 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"
    ]
  }
}

下面是我的 postcss.config.js

  module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
  }

下面是我的 tailwind.config.js

  module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

后来，我编辑了我的index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

//const App = require("./App");

ReactDOM.render(
    <App title="Heyy React Dev Tool"/>, document.getElementById("root")
);

我还编辑了我的 App.js，如下所示

  import React from "react";
  import "./assets/css/style.css"

    function App({title}) {
      return (
          <div>
            <div className="bg-gray-600 text-white p-5 border">{title}</div>        
          </div>
      );
    
    }  
    export default App;

最后但现在最不重要的是这些是我生成的 style.css 文件

样式.css

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

//const App = require("./App");

ReactDOM.render(
    <App title="Heyy React Dev Tool"/>, document.getElementById("root")
);

Answer 1

我看过你的仓库：尽管你说你遵循了指南，但你没有。问题归结为没有真正正确地遵循文档。

您的文件中缺少此行tailwind.config.js，这会导致 tailwind 无法检测所有.js文件中的类使用情况：

module.exports = {
  // You are missing this block that defines what files tailwind should scan for usage
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加此行后，您的 CSS 应该正确构建：

其他表明您没有正确遵循指南的迹象：

• tailwindcss被列为依赖项而不是 devDependency
• 您的tailwind.config.js文件似乎已过时。你确定你跑得npx tailwindcss init正确吗？您确定您确实运行的是 Tailwind CSS v3 吗？