Next.jsにTailwind.cssを導入する方法

# npm の場合
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# yarn の場合
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

# npm の場合
npm install -D tailwindcss postcss-flexbugs-fixes postcss-preset-env postcss-import precss

# yarn の場合
yarn add -D tailwindcss postcss-flexbugs-fixes postcss-preset-env postcss-import precss

npx tailwindcss init -p

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

module.exports = {
  purge: [
    './pages/**/*.js', // TypeScriptの場合は[.js]ではなく[.tsx]
    './components/**/*.js' // TypeScriptの場合は[.js]ではなく[.tsx]
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";

Error: PostCSS plugin tailwindcss requires PostCSS 8.

# npm の場合
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# yarn の場合
yarn remove tailwindcss postcss autoprefixer
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9