🐕‍🦺

【React】HeroUIをNext.js・Tailwind v4の環境で使うための設定など

2025/06/01に公開

概要

UIコンポーネントライブラリHeroUIを試したいなと思い、Next.js・Tailwind v4環境下で使ってみました。HeroUIの概要については、[React, Next.js] 気になったUIコンポーネントライブラリをまとめたの記事を参考にしてください。

前提

使用した@heroui/reactのバージョンは2.8.0-beta.6です。2.8.0は2025年6月現在だとまだベータ版ですが、おそらく正式版になってもTailwind v4は2.8.0以降でしか対応しないと思われます。
使用したtailwindcssのバージョンは4.1.7です。
使用したNext.jsのバージョンは15.3.2です。また、Next.js環境なのでPostCSSの使用を前提とします。

主な設定箇所など

まずはpostcss.config.mjsの設定です。これはTailwindのドキュメントにあるInstall Tailwind CSS with Next.jsの通りとなります。

postcss.config.mjs

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

export default config;

tailwind.config.jsはHeroUIのドキュメントNext.jsのドキュメントを参考に、以下の通り設定します。（今回はdarkModeは使用しません）

tailwind.config.js

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

module.exports = {
  content: ["./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"],
  plugins: [heroui()],
};

globals.cssへHeroUIのドキュメントTailwind v4にある通り、tailwind.config.jsのconfigを追加します。

globals.css

@import "tailwindcss";
@config "../../tailwind.config.js";

最後にHeroUIのドキュメントNext.jsのドキュメントに記載があるHeroUIProviderを、layout.tsxに設定します。

layout.tsx

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

import "@/style/globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body>
        <HeroUIProvider>
          {children}
        </HeroUIProvider>
      </body>
    </html>
  );
}

概要

前提

主な設定箇所など

Discussion