[Feature Request]Tailwind v4 support.

[iSaulX]

Is your feature request related to a problem? Please describe.

The new version of tailwind comes with a breaking change feature to HeroUI. v4 removes the tailwind.config.js.
This change breaks HeroUI, making the components unable to show the right style.

Describe the solution you'd like

A new version of the docs showing how we can install HeroUI with the new version of TailwindCSS.

Describe alternatives you've considered

Trying to use tailwind's way to upgrade to v3 to v4 using

@config "tailwind.config.js"; 

With no success. It just show this error message:

11:00:32 PM [vite] Internal server error: `addUtilities({ ':root' : … })` defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. `.scrollbar-none`.
  Plugin: @tailwindcss/vite:generate:serve
  File: /Users/saul/Desktop/project/app/src/index.css:19:3479

Screenshots or Videos

How a Button is showing when using the new version of Tailwindcss.

[linear]

ENG-1957 [Feature Request]Tailwind v4 support.

[Butonix]

I am facing the same problem. When is the heroui update expected?

I tried this! It didn't work.

hero.ts

import {heroui} from "@heroui/react"
export default heroui

global.css

@import "tailwindcss";
@plugin "./hero.ts";
@source "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";

[Cierra-Runis]

You can find :root selector at below:

heroui/packages/core/theme/src/plugin.ts

Line 50 in cddba82

cssSelector = `:root,${cssSelector}`;

heroui/packages/core/theme/src/plugin.ts

Line 158 in cddba82

[":root, [data-theme]"]: {

This should be easily solved. However I don't know why Tailwind CSS requests "utilities must be a single class name and start with a lowercase letter", maybe it doesn't admit pseudo-classes.

According to MDN, maybe we can use html selector instead however html doesn't start with .... it's confusing...

[rockey2020]

same questions

[kkimdev]

I think this should be a high priority for Hero UI, as this is effectively a blocker for adopting Tailwind 4 for any projects that use Hero UI.

Btw, thanks for the awesome UI library!

[TianMengLucky]

When will the HeroUI version supporting Tailwind v4 be released?

[Butonix]

When will the update be released? I think the developers should have followed the development of tailwind, since hero is strictly dependent on tailwind, and released the update together with the release of tailwind 4. Otherwise, hero is useless now

[anaooz]

looking forward to this!

[Error6929]

Tailwind CSS 3.4 or later

It says in the docs. but tailwind v4 is not supported yet!

[pppdns]

2 weeks have passed

Actually, Tailwind 4.0 Beta has been out since Nov 21, 2024, so it's been almost 3 months. Not to mention that Tailwind v4.0-alpha has been publicly available since March 6, 2024 (almost a year ago). So there was plenty of time to prepare HeroUI for Tailwind 4

[Ronbb]

The #4656 was added to the v2.8.0. But the next version is v2.7.0. 😔

[kanethzero]

I come here almost daily to see if there is a solution and nothing 😔️. It's been a while.

[slaby93]

+1
We have migrated everything to latest version but can't finish due to HeroUI not supporting new tailwind (I have also PRO license).

[morgandoane]

Another vote for V4 support please!

🙏🙏🙏🙏🙏🙏🙏🙏🙏

[stx-chris]

Indeed @leetcow, the Next.js / yarn equivalent is:

yarn add -D "@heroui/react@https://pkg.pr.new/@heroui/react@63afa9a"

It must be made sure, though, that no other @heroui packages from a different release are added. Then the heroui() plugin works without any warnings or errors and the theme is correctly applied.

Works like a charm! Looking forward to the actual release. Thx!

[winchesHe]

tailwindcss V4 support beta released!

https://beta.heroui.com/docs/guide/tailwind-v4

[stx-chris]

Thanks to the team for releasing the beta version. But note the subtle styling differences of version 2.7.6-beta.1 to the expected UI of commit version 63afa9a. All the borders are missing. I assume 63afa9a has already applied some fixes that didn't make it to the beta in time.

[winchesHe]

Thanks to the team for releasing the beta version. But note the subtle styling differences of version 2.7.6-beta.1 to the expected UI of commit version 63afa9a. All the borders are missing. I assume 63afa9a has already applied some fixes that didn't make it to the beta in time.

I found it caused by the tailwind-merge and i have reported it to their repo dcastil/tailwind-merge#544

[FTCHD]

beta is broken on the latest version of next (15.2.1)

[MaximSaveliev]

Hello is somebody who can help me install HeroUI for NextJS 15 with Tailwind v4

I have made just simple installation with NextJS latest version
And when start adding HeroUI it fully broke

Calendar looks awesome ✨✨✨

[iSaulX]

Hello is somebody who can help me install HeroUI for NextJS 15 with Tailwind v4

I have made just simple installation with NextJS latest version And when start adding HeroUI it fully broke

Calendar looks awesome ✨✨✨

Hey there, there's no official support for Tailwind v4. Tailwind v4 came out with a lot of breaking changes, and HeroUI is still making changes to support TaiwlindCSS, you could give a shot using a Vite template they already tried with Tailwind v4.

[FTCHD]

looks like Next.js is not a first class citizen anymore for NextUI 😆

[stx-chris]

Hey @MaximSaveliev, for Next.js try to perform the following steps:

1. Create a new project from the HeroUI template according to the installation guide
2. Remove all @heroui packages from package.json
3. Install beta version @heroui/react@beta as outlined above, depending on whether you are using yarn, pnpm or npm
4. Optional (?): Change all individual HeroUI imports to @heroui/react ones, ie. import { Button } from "@heroui/react"; (Maybe your previous calls to `@heroui/button and so on still work with the beta but I haven't tried yet)
5. Rename tailwind.config.js into tailwind.config.mjs to allow for proper module bundling
6. Upgrade tailwind to v4 by running yarn add tailwindcss and install @tailwindcss/postcss as per documentation
7. Make the documented Tailwind v3 to v4 adjustments, ie.

# postcss.config.js:

module.exports = {
	plugins: {
		"@tailwindcss/postcss": {},
	},
};

# styles/globals.css:

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

Remove all content entries from tailwind.config.mjs except the one (currently) needed for HeroUI and keep the heroui() plugin as below:

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

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

Then you should be able to compile without errors and run HeroUI with Tailwind v4. Good luck!

P.S. I am pretty sure once out of beta the HeroUI team will release new boilerplate with all mentioned steps performed already.

[FTCHD]

@stx-chris with all due respect, Next.js 15 does not work, as me and other people have mentioned.

if you do not believe us, please share a boilerplate repo that actually works, otherwise it's futile to post instructions that we've already tried and followed.

[stx-chris]

@FTCHD You do notice that all of us engage in these issues and conversations in our spare time to improve the quality of this library and help others being stuck with similar issues. If you invested the time to read my step-by-step guide, actually tried it yourself and not just waited until someone spends hours working out a solution and serves it readily to copy&paste, we would all have more fun in this community.

I am using Next 15.2.1,Tailwind 4.0.12 and HeroUI 2.7.6-beta.1 at the moment and, so far, the setup works without compilation or runtime errors.

Since you asked, find the repo here for reference.

Bear in mind that this is just a temporary issue, as the HeroUI team seems to be actively working towards a more durable solution to support Tailwind v4 without the @config workaround.

[winchesHe]

@stx-chris with all due respect, Next.js 15 does not work, as me and other people have mentioned.

if you do not believe us, please share a boilerplate repo that actually works, otherwise it's futile to post instructions that we've already tried and followed.

I have created a temporay pr with next 15 tailwindcss v4 you can refer to the changes heroui-inc/next-app-template#38

[winchesHe]

Bear in mind that this is just a temporary issue, as the HeroUI team seems to be actively working towards a more durable solution to support Tailwind v4 without the @config workaround.

@stx-chris Thank you 👍, in v3 we will support pure css file to use heroui, for v2 still need to use config

[laurentlahmy]

@stx-chris Thank you 👍, in v3 we will support pure css file to use heroui

Would it be ok to share a rough ETA for HeroUI 3? Just to have an idea, thanks.

[winchesHe]

Would it be ok to share a rough ETA for HeroUI 3? Just to have an idea, thanks.

There will be a lot of component refactoring, which should take a while, stay tune to X or discord announcements!

[MaximSaveliev]

Hey @MaximSaveliev, for Next.js try to perform the following steps:

1. Create a new project from the HeroUI template according to the installation guide
2. Remove all @heroui packages from package.json
3. Install beta version @heroui/react@beta as outlined above, depending on whether you are using yarn, pnpm or npm

Thanks for your response, i will try it if it will work for me
I also tried to add hero_ui.ts file and lines in globals.css , but get the same calendar (possible wrong path to stylings)

@config "../hero_ui.ts";
@source "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";

[stx-chris]

@MaximSaveliev have a look at the provided repo, better to forget about the suggested @config and @source directives.

[kimkong88]

@winchesHe Thank you for your hard work making tailwind v4 working. I tried to get Hero UI working with my project but I was unable to do so. (no errors but styles don't apply). I followed standard guide for installing a new NextJS project with Tailwind v4, and Hero UI provided guide for get beta working.

I've added @config as advised in ./app/globals.css

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

and within my ./tailwind.config.mjs

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

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    darkMode: "class",
    plugins: [heroui()],
};

I have above. Basic setups such as providers are done correctly.
Package versions I am using are:

"next": "15.2.0"
"postcss": "^8.5.3"
"@heroui/react": "^2.7.6-beta.2"
"tailwindcss": "^4.0.12"
"@tailwindcss/postcss": "^4.0.12"
"react": "^19.0.0"
"framer-motion": "^12.4.10"

Please advise if I need to take extra steps to ensure HeroUI works with Tailwind v4.

[kimkong88]

I have crucial finding that made HeroUI work with Tailwind v4.
Great thanks to @stx-chris

After following https://github.com/sensotix/heroui-playground-tw4 repo,
I realized I may not have been setting up theme correctly.
I can confirm after setting theme, all works correctly. (I think many may have made this mistake)

[stx-chris]

The team has recently released version 2.7.6-beta.2, which seems to contain additional UI fixes.

[MaximSaveliev]

@kimkong88 and @stx-chris your solutions works good
Thanks a lot you and HeroUI developers ✨

It start working but some styles not properly looks, is it cause of beta version or it should works?
And can i modify that styles if it not properly works by myself just adding className="necessary styles"?

For better understanding PR (wanna have Shadcn and HeroUI libs)
Possible Shadcn overrides HeroUI stylings? (Possible some fixes)

• #7 Adding UI libs MaximSaveliev/real-estate-platform#9

      <Button color="primary">Button</Button>
      <Form className="w-full max-w-xs" onSubmit={onSubmit}>
        <Input
          isRequired
          errorMessage="Please enter a valid email"
          label="Email"
          labelPlacement="outside"
          name="email"
          placeholder="Enter your email"
          type="email"
        />
        <Button type="submit" variant="faded" color="success" className="mt-4">
          Submit
        </Button>
        {submitted && (
          <div className="text-small text-default-500">
            You submitted: <code>{JSON.stringify(submitted)}</code>
          </div>
        )}
      </Form>
      <Calendar showMonthAndYearPickers aria-label="Date (Show Month and Year Picker)" />

[cprcrack]

Is Tailwind v4 support expected to come to HeroUI v2 soon? Or will it be delayed until HeroUI v3?

[stx-chris]

It start working but some styles not properly looks, is it cause of beta version or it should works? And can i modify that styles if it not properly works by myself just adding className="necessary styles"?

@MaximSaveliev What I noticed in the latest beta is that for some components, such as the Modal, the theme is not automatically applied. I had to add <Modal className="light" .../> to see the default theme working. Maybe you can try the same.

[cprcrack]

Was anyone able to make it HeroUI work with Tailwind v4 in Astro?

[SamHoque]

It seems the bug is that its not defining the heroui styles, but its exporting the css perfectly.

example CSS is being generated

  .border-warning {
    border-color: hsl(var(--heroui-warning) / 1);
  }

but --heroui-warning does not exist.

[SamHoque]

I was able to fix this by manually defining these values in my global.css for anyone who is still stuck on this.

:root {
  /* Base Colors - HSL values for Tailwind-like colors */
  
  /* Default - Gray colors */
  --heroui-default: 220 17% 63%;            /* gray-500 */
  --heroui-default-50: 210 40% 98%;         /* gray-50 */
  --heroui-default-100: 220 14% 96%;        /* gray-100 */
  --heroui-default-200: 220 13% 91%;        /* gray-200 */
  --heroui-default-300: 216 12% 84%;        /* gray-300 */
  --heroui-default-400: 218 11% 75%;        /* gray-400 */
  --heroui-default-500: 220 9% 63%;         /* gray-500 */
  --heroui-default-600: 215 14% 46%;        /* gray-600 */
  --heroui-default-700: 217 19% 35%;        /* gray-700 */
  --heroui-default-800: 215 28% 17%;        /* gray-800 */
  --heroui-default-900: 221 39% 11%;        /* gray-900 */
  --heroui-default-foreground: 0 0% 100%;   /* white */
  
  /* Primary - Blue colors */
  --heroui-primary: 217 91% 60%;            /* blue-500 */
  --heroui-primary-50: 214 100% 97%;        /* blue-50 */
  --heroui-primary-100: 214 95% 93%;        /* blue-100 */
  --heroui-primary-200: 213 97% 87%;        /* blue-200 */
  --heroui-primary-300: 212 96% 78%;        /* blue-300 */
  --heroui-primary-400: 213 94% 68%;        /* blue-400 */
  --heroui-primary-500: 217 91% 60%;        /* blue-500 */
  --heroui-primary-600: 221 83% 53%;        /* blue-600 */
  --heroui-primary-700: 224 76% 48%;        /* blue-700 */
  --heroui-primary-800: 226 71% 40%;        /* blue-800 */
  --heroui-primary-900: 224 64% 33%;        /* blue-900 */
  --heroui-primary-foreground: 0 0% 100%;   /* white */
  
  /* Secondary - Purple colors */
  --heroui-secondary: 270 59% 58%;          /* purple-500 */
  --heroui-secondary-50: 270 100% 98%;      /* purple-50 */
  --heroui-secondary-100: 269 100% 95%;     /* purple-100 */
  --heroui-secondary-200: 269 97% 90%;      /* purple-200 */
  --heroui-secondary-300: 270 95% 84%;      /* purple-300 */
  --heroui-secondary-400: 270 91% 76%;      /* purple-400 */
  --heroui-secondary-500: 270 59% 58%;      /* purple-500 */
  --heroui-secondary-600: 271 68% 50%;      /* purple-600 */
  --heroui-secondary-700: 273 65% 40%;      /* purple-700 */
  --heroui-secondary-800: 273 61% 33%;      /* purple-800 */
  --heroui-secondary-900: 271 52% 28%;      /* purple-900 */
  --heroui-secondary-foreground: 0 0% 100%; /* white */
  
  /* Success - Green colors */
  --heroui-success: 142 69% 46%;            /* green-500 */
  --heroui-success-50: 138 76% 97%;         /* green-50 */
  --heroui-success-100: 141 84% 93%;        /* green-100 */
  --heroui-success-200: 141 79% 85%;        /* green-200 */
  --heroui-success-300: 142 77% 73%;        /* green-300 */
  --heroui-success-400: 142 69% 58%;        /* green-400 */
  --heroui-success-500: 142 69% 46%;        /* green-500 */
  --heroui-success-600: 142 71% 36%;        /* green-600 */
  --heroui-success-700: 142 72% 29%;        /* green-700 */
  --heroui-success-800: 143 64% 24%;        /* green-800 */
  --heroui-success-900: 144 61% 20%;        /* green-900 */
  --heroui-success-foreground: 0 0% 100%;   /* white */
  
  /* Warning - Yellow colors */
  --heroui-warning: 43 96% 58%;             /* yellow-500 */
  --heroui-warning-50: 55 100% 95%;         /* yellow-50 */
  --heroui-warning-100: 55 97% 88%;         /* yellow-100 */
  --heroui-warning-200: 52 99% 79%;         /* yellow-200 */
  --heroui-warning-300: 47 96% 67%;         /* yellow-300 */
  --heroui-warning-400: 45 93% 61%;         /* yellow-400 */
  --heroui-warning-500: 43 96% 58%;         /* yellow-500 */
  --heroui-warning-600: 38 92% 50%;         /* yellow-600 */
  --heroui-warning-700: 32 81% 41%;         /* yellow-700 */
  --heroui-warning-800: 26 83% 34%;         /* yellow-800 */
  --heroui-warning-900: 22 78% 26%;         /* yellow-900 */
  --heroui-warning-foreground: 220 26% 14%; /* gray-900 */
  
  /* Danger - Red colors */
  --heroui-danger: 0 84% 60%;               /* red-500 */
  --heroui-danger-50: 0 86% 97%;            /* red-50 */
  --heroui-danger-100: 0 93% 94%;           /* red-100 */
  --heroui-danger-200: 0 96% 89%;           /* red-200 */
  --heroui-danger-300: 0 94% 82%;           /* red-300 */
  --heroui-danger-400: 0 91% 71%;           /* red-400 */
  --heroui-danger-500: 0 84% 60%;           /* red-500 */
  --heroui-danger-600: 0 72% 51%;           /* red-600 */
  --heroui-danger-700: 0 74% 42%;           /* red-700 */
  --heroui-danger-800: 0 70% 35%;           /* red-800 */
  --heroui-danger-900: 0 63% 31%;           /* red-900 */
  --heroui-danger-foreground: 0 0% 100%;    /* white */
  
  /* Foreground - Slate colors for text */
  --heroui-foreground: 222 47% 11%;         /* slate-900 */
  --heroui-foreground-50: 210 40% 98%;      /* slate-50 */
  --heroui-foreground-100: 214 15% 91%;     /* slate-100 */
  --heroui-foreground-200: 213 12% 83%;     /* slate-200 */
  --heroui-foreground-300: 213 10% 71%;     /* slate-300 */
  --heroui-foreground-400: 215 14% 56%;     /* slate-400 */
  --heroui-foreground-500: 215 16% 47%;     /* slate-500 */
  --heroui-foreground-600: 215 20% 37%;     /* slate-600 */
  --heroui-foreground-700: 215 25% 27%;     /* slate-700 */
  --heroui-foreground-800: 217 33% 17%;     /* slate-800 */
  --heroui-foreground-900: 222 47% 11%;     /* slate-900 */
  --heroui-foreground-foreground: 0 0% 100%; /* white */
  
  /* Content Colors */
  --heroui-content1: 0 0% 100%;             /* white */
  --heroui-content1-foreground: 222 47% 11%; /* slate-900 */
  --heroui-content2: 220 14% 96%;           /* gray-100 */
  --heroui-content2-foreground: 222 47% 11%; /* slate-900 */
  --heroui-content3: 220 13% 91%;           /* gray-200 */
  --heroui-content3-foreground: 222 47% 11%; /* slate-900 */
  --heroui-content4: 216 12% 84%;           /* gray-300 */
  --heroui-content4-foreground: 222 47% 11%; /* slate-900 */
  
  /* Layout Colors */
  --heroui-background: 0 0% 100%;           /* white */
  --heroui-focus: 217 91% 60% / 0.25;       /* blue-500 / 25% */
  --heroui-overlay: 0 0% 0% / 0.4;          /* black / 40% */
  
  /* Typography */
  --heroui-font-size-tiny: 0.75rem;         /* 12px - equivalent to text-xs */
  --heroui-font-size-small: 0.875rem;       /* 14px - equivalent to text-sm */
  --heroui-font-size-medium: 1rem;          /* 16px - equivalent to text-base */
  --heroui-font-size-large: 1.125rem;       /* 18px - equivalent to text-lg */
  
  --heroui-line-height-tiny: 1rem;          /* 16px - for xs text */
  --heroui-line-height-small: 1.25rem;      /* 20px - for sm text */
  --heroui-line-height-medium: 1.5rem;      /* 24px - for base text */
  --heroui-line-height-large: 1.75rem;      /* 28px - for lg text */
  
  /* Border & Radius */
  --heroui-radius-small: 0.125rem;          /* 2px - equivalent to rounded-sm */
  --heroui-radius-medium: 0.25rem;          /* 4px - equivalent to rounded */
  --heroui-radius-large: 0.5rem;            /* 8px - equivalent to rounded-lg */
  
  --heroui-border-width-small: 1px;         /* border */
  --heroui-border-width-medium: 2px;        /* border-2 */
  --heroui-border-width-large: 4px;         /* border-4 */
  
  /* Other Parameters */
  --heroui-disabled-opacity: 0.5;           /* opacity-50 */
  --heroui-divider-weight: 1px;             /* border */
  --heroui-hover-opacity: 0.8;              /* opacity-80 */
}

/* Dark mode variables */
.dark {
  /* Base Colors for dark mode */
  --heroui-default: 217 19% 65%;            /* gray-400 (dark mode) */
  --heroui-default-50: 222 47% 11%;         /* gray-900 */
  --heroui-default-100: 215 28% 17%;        /* gray-800 */
  --heroui-default-200: 217 19% 27%;        /* gray-700 */
  --heroui-default-300: 215 14% 36%;        /* gray-600 */
  --heroui-default-400: 217 9% 55%;         /* gray-500 */
  --heroui-default-500: 217 19% 65%;        /* gray-400 */
  --heroui-default-600: 216 12% 74%;        /* gray-300 */
  --heroui-default-700: 220 13% 81%;        /* gray-200 */
  --heroui-default-800: 220 14% 86%;        /* gray-100 */
  --heroui-default-900: 210 40% 98%;        /* gray-50 */
  --heroui-default-foreground: 215 28% 17%; /* gray-800 */
  
  /* Content Colors (dark mode) */
  --heroui-content1: 222 47% 11%;           /* gray-900 */
  --heroui-content1-foreground: 210 40% 98%; /* gray-50 */
  --heroui-content2: 215 28% 17%;           /* gray-800 */
  --heroui-content2-foreground: 210 40% 98%; /* gray-50 */
  --heroui-content3: 217 19% 27%;           /* gray-700 */
  --heroui-content3-foreground: 210 40% 98%; /* gray-50 */
  --heroui-content4: 215 14% 36%;           /* gray-600 */
  --heroui-content4-foreground: 210 40% 98%; /* gray-50 */
  
  /* Layout Colors (dark mode) */
  --heroui-background: 224 71% 4%;          /* gray-950 */
  --heroui-foreground: 210 40% 98%;         /* gray-50 */
  
  /* Other dark mode adjustments */
  --heroui-focus: 217 91% 60% / 0.35;       /* blue-500 / 35% */
  --heroui-overlay: 0 0% 0% / 0.6;          /* black / 60% */
}

please note, you still need to define the config. @config "../../tailwind.config.mjs";

[QC2168]

@winchesHe Thank you for your hard work making tailwind v4 working. I tried to get Hero UI working with my project but I was unable to do so. (no errors but styles don't apply). I followed standard guide for installing a new NextJS project with Tailwind v4, and Hero UI provided guide for get beta working.

I've added @config as advised in ./app/globals.css

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

and within my ./tailwind.config.mjs

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

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    darkMode: "class",
    plugins: [heroui()],
};

I have above. Basic setups such as providers are done correctly. Package versions I am using are:

"next": "15.2.0"
"postcss": "^8.5.3"
"@heroui/react": "^2.7.6-beta.2"
"tailwindcss": "^4.0.12"
"@tailwindcss/postcss": "^4.0.12"
"react": "^19.0.0"
"framer-motion": "^12.4.10"

Please advise if I need to take extra steps to ensure HeroUI works with Tailwind v4.

I got error

Error evaluating Node.js code
Error: addUtilities({ ':root' : … }) defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. .scrollbar-none

[winchesHe]

You can try upgrade @heroui/theme to beta

[stx-chris]

or even easier:

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

at least during the beta phase.

[stx-chris]

For Next.js, make also sure that the HeroUIProvider is loaded and/or the theme is specified in a wrapper as per doc

<HeroUIProvider>
   <main className="light">
      <App />
   </main>
</HeroUIProvider>

or using next-themes:

<HeroUIProvider navigate={router.push}>
   <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
</HeroUIProvider>