Tailwind CSS does not work on installation

Question

My Tailwind CSSV does not work after installation, no idea why it isnt working.

I followed all the steps exactly as per the docs.

No styles apply to any component and there are no error messages in the console.

Does Tailwind work with react scripts 4.0.3? I had to downgrade because react scripts 5.0.0 does not work with polyfills and that error seems unfixable.

My file sturucture:

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

everything seems to be correct, have You tried running in the terminal the following commands =>

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

Then of course running the node server to see if it compiles

P.S. I would also suggest to follow the guidance in the following link https://medium.com/codingthesmartway-com-blog/how-to-use-tailwind-css-with-react-9dd78bbdc0e0 as whenever I need I follow this exact template and so far zero problems with it.

Answer 2

The answer:

Tailwind only works with React Scripts >5.0.0

so command is

npm i react-scripts@latest

However the problem with this is that Create React App does not work with React Scripts 5.0.0 due to polyfills as described in detail here:

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

Stack Overflow has tried to tackle this issue but has failed in threads such as:

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

and

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

None of the above solutions are correct.

The only thing that worked for me was

npm i url fs assert crypto-browserify stream-http https-browserify os-browserify/browser buffer stream-browserify

Add config-overrides.js to root of project with this:

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

then change package.json scripts to

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

Then npm start

Now ONLY AFTER HAVING DONE ALL THIS... will Tailwind work with the latest version of React-Scripts and Webpack 5.