在react中使用tailwind的问题

npx create-react-app name

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwind/postcss7-compat postcss@^7 autoprefixer@^9

npm i @craco/craco

module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer')
            ]
        }
    }
}

npx tailwindcss init`

    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html'

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

import pic from './malibu.jpg'
function App() {
  return (
    <div className="antialiased text-gray-900 bg-gray-200 min-h-screen p-8 flex items-center flex-col justify-center min-w-screen">
      <div className="p-4 bg-indigo-300 rounded-3xl ">
        <h1 className=" text-xl font-semibold text-gray-500">Tailwind CSS</h1>
        <div className="w-24 mt-3">
          <img className="rounded-lg shadow-md" src={pic} alt="pic" />
        </div>
        <div className="">
          <span className="float-left mt-2 p-2 bg-green-300 text-sm font-black rounded-full shadow-sm">Nice view!</span>
          <div></div>
        <span className=" mr-100% float-right mt-2 p-2 bg-white text-sm font-black rounded-full shadow-sm">Go now?</span>
        </div>
       
      </div>
    </div>
  );
}

export default App;