next+tailwind+yarn

0.md

yarn create next-app .

yarn add --dev tailwindcss postcss autoprefixer

yarn tailwindcss init -p

put in tailwind.config.js

content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

put in globals.css

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

index.js

export default function Home() {
  return (
    <>
      <div className="flex h-screen">
        <div className="m-auto">
          <h3>title</h3>
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">button</button>
          <h1 className="text-3xl font-bold underline">
            Hello world!
          </h1>
        </div>

      </div>

    </>
  )
}