顺风CSS不适用于安装。

Question

我的尾风CSSV安装后不工作，不知道为什么它不工作。

我完全按照文档执行所有的步骤。

没有样式应用于任何组件，控制台中也没有错误消息。

Tailwind是否与react脚本4.0.3一起工作？我不得不降级，因为react脚本5.0.0不适用于Poly填充，而且该错误似乎无法修复。

我的档案结构：

​

​

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("Scan your Green Pass and your raw data will appear here")
const [decodedScanData, setDecodedScanData] = useState("Scan your Green Pass and decoded data will appear here")

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

    //Take off HC1: from string and then decode from Base45 into compressed Bytes
    const greenpassBody = data.text.substr(4);
    const decodedData = base45.decode(greenpassBody);
    setDecodedScanData(decodedData);

    //Decompress into CBOR bytes
    const decompressedData = pako.inflate(decodedData)
   
   
    //COSE to CBOR to 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>Click to close QR Code Scanner</strong>
          </button>
        </div>
      ) : (
        <div>
          <button
            onClick={() => {
              setShowScanner(true);
            }}
          >
            <strong>Click to open QR Code Scanner</strong>
          </button>
        </div>
      )}
      <h2>Here is the raw version of what your Green Pass looks like before decompression and decoding</h2>
      {scanData}
      <h2>Here is your decompressed Green Pass Data looks like in bytes</h2>
      {decodedScanData}
   
      <h2>Here are the full details encoded in your Green Pass</h2>

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

export default App

Answer 1

似乎一切都是正确的，您是否尝试在终端中运行以下命令=>

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

然后运行节点服务器，查看它是否编译。

我还建议遵循下面的链接https://medium.com/codingthesmartway-com-blog/how-to-use-tailwind-css-with-react-9dd78bbdc0e0中的指导，因为每当我需要的时候，我都遵循这个精确的模板，到目前为止它没有问题。

Answer 2

答案是：

顺风只适用于React脚本>5.0.0

所以命令是

npm i react-scripts@latest

但是，这方面的问题是，不适用于ReactiveScripps5.0.0，这是由于使用了多填充，如下面详细描述的那样：

https://github.com/facebook/create-react-app/issues/11756

堆栈溢出试图解决此问题，但在以下线程中失败：

Best way to polyfill ES6 features in React app that uses create-react-app

和

Best way to polyfill ES6 features in React app that uses create-react-app

上述解决方案中没有一个是正确的。

唯一对我起作用的是

npm i url fs断言密码-browserify流-http https-browserify os-browserify/浏览器缓冲区流-browserify

将config-overrides.js添加到项目的根，如下所示：

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

Then npm i react-app-rewired

然后将package.json脚本更改为

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

然后是npm start

现在只有在做完这一切之后..。将尾风与最新版本的反应-脚本和Webpack 5。