既存nextjsプロジェクトにtailwind.cssを追加する方法

nextjsプロジェクトのルートディレクトリで以下のコマンドを実行して、該当パッケージをプロジェクトに追加する。

 npm install -D tailwindcss postcss autoprefixer

以下のコマンドで、tailwindを初期化する

npx tailwindcss init

tailwind.config.jsを以下のようにする

import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;

そして、postcss.config.tsを以下のようにする

/** @type {import('postcss-load-config').Config} */
const config = {
    plugins: {
      tailwindcss: {},
    },
  };
  
  export default config;
}

上記のようにすればとりあえず自分の環境ではtailwindが動きました。