😺
既存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が動きました。
Discussion