● React + Tailwind CSS のアプリを新規作成する

npx create-next-app next-tailwind -e with-tailwindcss

● Tailwind CSS のインストール

npm install -D tailwindcss postcss autoprefixer

● Tailwind CLI のインストール

npm install -D tailwindcss-cli

● Tailwind CSS の設定ファイルの作成

npx tailwindcss-cli init

自動で tailwind.config.js , postcss.config.js の2ファイルが生成されます

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

● postcssを通して使う

npm install -D @tailwindcss/postcss

postcss.config.js

export default {
    plugins: {
        '@tailwindcss/postcss': {},
    },
}