⚠️

turborepoでherouiが正常に動かない問題

に公開
Next.js
React
Tailwind CSS
heroui
tech

発生する問題

turborepoでherouiを使用しようとすると、スタイルがおかしくなる

使えてるし、エラーはないけど。
なんかおかしい。

結論

解決策として、tailwind.config.tsで指定するherouiのcontentを、ルートのnode_module内のもので指定する


import { heroui } from "@heroui/theme";

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}", ## ここでルートのnode_modules内のherouiパッケージを指定する
  ],
    ...
  ],
};

module.exports = config;

結果

スタイルが崩れずに表示されるようになる

Discussion