Tailwind CSS安装后失效求助：兼容react scripts 4.0.3吗？

我安装Tailwind CSS后发现它无法正常工作，不知道问题出在哪里。
我严格按照官方文档的所有步骤进行操作，但没有任何样式应用到组件上，且控制台中没有错误信息。
另外，Tailwind CSS是否兼容react-scripts 4.0.3？我不得不降级到该版本，因为react-scripts 5.0.0与polyfills不兼容，且这个错误似乎无法修复。

文件结构 #

相关代码 #

index.css #

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

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

App.js #

import React, { useState } from 'react'
import QrReader from "react-qr-scanner";
import base45 from 'base45'
import pako from 'pako'
import cbor from 'cbor'
import './index.css'

window.Buffer = window.Buffer || require("buffer").Buffer; 

const App = () => {

const [showScanner, setShowScanner] = useState(false);
const [scanData, setScanData] = useState("扫描你的绿码，原始数据会显示在这里")
const [decodedScanData, setDecodedScanData] = useState("扫描你的绿码，解码后的数据会显示在这里")

const handleScan = (data) => {
  if (data) {
    setScanData(data.text);

    // 去掉字符串开头的HC1:，然后从Base45解码为压缩字节
    const greenpassBody = data.text.substr(4);
    const decodedData = base45.decode(greenpassBody);
    setDecodedScanData(decodedData);

    // 解压为CBOR字节
    const decompressedData = pako.inflate(decodedData)
   
   
    // COSE转CBOR再转JSON
    const cbordata = cbor.decodeAllSync(decompressedData)
    const [headers1, headers2, cbor_data, signature] = cbordata[0].value;
    const greenpassData = cbor.decodeAllSync(cbor_data)
    const finalDataObject = greenpassData[0].get(-260).get(1)
  

  }
}
return (
  <div>
      {showScanner ? (
        <div>
          <QrReader
            delay={300}
            onError={(e) => console.log(e)}
                  style={{ width: "50%" }}
                  onScan={(data) => handleScan(data)}
          />

          <br />
            <button
            onClick={() => {
              setShowScanner(false);
            }}
          >
            <strong>点击关闭二维码扫描器</strong>
          </button>
        </div>
      ) : (
        <div>
          <button
            onClick={() => {
              setShowScanner(true);
            }}
          >
            <strong>点击打开二维码扫描器</strong>
          </button>
        </div>
      )}
      <h2>以下是你的绿码在解压和解码前的原始数据</h2>
      {scanData}
      <h2>以下是解压后的绿码字节数据</h2>
      {decodedScanData}
   
      <h2>以下是你绿码中包含的完整信息</h2>

      <h1 className="text-5xl red font-bold underline">
      Hello world!
    </h1>  
    </div>
)
}

export default App

Tailwind CSS 3.x 兼容 react-scripts 4.0.3，你的问题大概率是配置细节或类名错误导致的，按以下步骤排查：

1. 修正无效的Tailwind类名
   你在App.js中写的className="text-5xl red font-bold underline"里，red不是有效的Tailwind类名，Tailwind的文字颜色类名格式是text-{color}-{shade}，比如text-red-500或text-red-600。替换后该元素的样式才能生效。

2. 添加PostCSS配置文件
   react-scripts 4.x 需要显式配置PostCSS来启用Tailwind。在项目根目录创建postcss.config.js，写入以下内容：

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

3. 重启开发服务器
   修改配置文件后，必须关闭当前的React开发服务器并重新启动，新的配置才能生效。

4. 验证样式文件导入
   确保index.css被正确导入到你的应用中（目前你在App.js中导入是没问题的），如果是在index.js中导入全局样式也可以，只要路径正确即可。

5. 检查Tailwind版本
   确认你安装的是Tailwind CSS v3.x版本，v2.x的配置方式与v3.x不同，可能导致样式不生效。可以通过终端执行npm list tailwindcss查看当前版本。

内容的提问来源于stack exchange，提问作者Julius Goddard