新しいバージョンの HeroUI ( + tailwindcss@4 )をノリで適当にインストールすると、cssがきなかい。ということが起きるのでしっかりと設定方法を確認しましょう。

● heroui のインストール

npm install @heroui/react framer-motion

● hero.ts の作成 と 読み込み

hero.tsが必要になります。hero.ts - HeroUIプラグインの定義です。

重要なのは：

1. hero.ts - HeroUIプラグインの定義
2. @plugin "./hero.ts" - プラグインの読み込み
3. @source - HeroUIテーマファイルの読み込み を行うということです。

hero.ts

import { heroui } from "@heroui/react";
export default heroui();

globals.css

@import "tailwindcss";
@plugin "./hero.ts";

/* このファイルからの相対パス */
@source "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";

@custom-variant dark (&:is(.dark *));

postcss.config.mjs

const config = {
    plugins: {
        "@tailwindcss/postcss": {
            content: [
                // ● 実は以下の行は不要です。削除してしまってもok
                // "./src/**/*.{js,ts,jsx,tsx}",
                // "./node_modules/@heroui/**/*.{js,ts,jsx,tsx}"
            ]
        }
    }
};

export default config;

tailwind.config.ts → 不要です。

以上です。簡単ですね。

● 確認方法

1 . src/app/providers.tsx

'use client'

import { FC, ReactNode } from "react"
import {HeroUIProvider} from "@heroui/react";

type Props = {
  children: ReactNode;
}

export const Providers: FC<Props> = ({children}) => {
  return (
    <HeroUIProvider>
      {children}
    </HeroUIProvider>
  );
};

2 . src/app/layout.tsx

+      <Providers>
        {children}
+      </Providers>

3 . src/app/page.tsx

'use client'

import {Button} from "@heroui/react";

export default function Home() {
  return (
    <Button color="secondary">Button</Button>
);
}