Next.jsでTailwind CSSをインストールする方法

npm

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

globals.css

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

フレームワークごとのインストール方法（公式）

Framework Guides – Tailwind CSS

Framework-specific guides that cover our recommended approach to installing Tailwind CSS in a number of popular environments.

tailwindcss.com

静的なHTMLでTailwindCSSを使用したい場合はこちら

はじめてのTailwind CSS【初心者向けインストール方法Ver.3】 | sinpe-Blog

TailwindCSSをサクッと体験してみたい人 TailwindCSS使ってみたいけど、公式ドキュメント読む…

sinpe-pgm.com