reactjs - Tailwind CSS 3 没有应用在我的 React 应用程序中

Question

我想在我的 React 应用程序中使用 Tailwind CSS，但它不起作用。我按照 Tailwind 网站上的说明来了解如何安装它，但 CSS 没有被应用。

App.js

    // import './App.css';
    import './index.css';
    import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
    import Home from './Home/Home'
    
    function App() {
      return (
        <Router>
          <Routes>
            <Route>
              <Route exact path="/" element={<Home/>} />
            </Route>
          </Routes>
        </Router>  );
    }
    
    export default App;

index.css

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

tailwind.config

    module.exports = {
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
        "./public/index.html",
      ],
      purge: [],
      darkMode: false, // or 'media' or 'class'
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    }

postcss.config.js

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

package.json

      {
      "name": "archives",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@tailwindcss/postcss7-compat": "^2.2.17",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.3.0",
        "@testing-library/user-event": "^13.5.0",
        "nanoid": "^4.0.0",
        "picocolors": "^1.0.0",
        "postcss-loader": "^7.0.1",
        "postcss-preset-env": "^7.7.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.3.0",
        "react-scripts": "^5.0.1",
        "source-map-js": "^1.0.2",
        "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": "^9.8.8",
        "postcss": "^7.0.39",
        "postcss-flexbugs-fixes": "^5.0.2",
        "tailwindcss": "^3.1.6"
      }
    }

Home.js

    import React from 'react';
    import '../index.css';
    
    const Home = () => {
        return (
          <div className='w-full h-full'>
          <div className='flex justify-center'>
              <h1 className=
    'text-2xl lg:text-5xl font-bold text-green-600 mt-12'>
                  hi</h1>
          </div>
      </div>  
        );
      };
    
      
      export default Home;

Answer 1

我的顺风车也坏了，但是，几周前我遇到了同样的问题。

对我有用的解决方案是将任何普通CSS添加到我的index.css中，如下所示:

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

body { 
    background-color: #3f4040;`
}

(抱歉，如果这不是一篇很棒的文章。这是我的第一篇!)