[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...