Tailwind CSS
Tailwind CSS is a utility-first CSS framework that works exceptionally well with Next.js.
Installing Tailwind
Install the Tailwind CSS packages and run the init command to generate both the tailwind.config.js and postcss.config.js files:
Terminal npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configuring Tailwind
Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names:
tailwind.config.js /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',