[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[bot]]

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:

https://github.com/heroui-inc/heroui/blob/cddba8281cb161d0a8afb42e20c05094974af981/packages/core/theme/src/plugin.ts#L50

https://github.com/heroui-inc/heroui/blob/cddba8281cb161d0a8afb42e20c05094974af981/packages/core/theme/src/plugin.ts#L158

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 https://github.com/heroui-inc/heroui/pull/4656 was added to the v2.8.0. But the next version is v2.7.0. 😔

[slenv]

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!

🙏🙏🙏🙏🙏🙏🙏🙏🙏

[aurora-lch]

+1

[winchesHe]

Hey guys, currently you can use heroui tailwindcss v4 through the preview version, follow the guided migration at the link

[winchesHe]

Hey guys i have created a heroui template for tailwindcss v4 which can refer to the migration

https://github.com/heroui-inc/vite-template/pull/10

[Butonix]

Привет, ребята, я создал шаблон hero для TailwindCSS v4, с которым можно ознакомиться в процессе миграции

heroui-inc/vite-шаблон№10

This does not work with nextjs as it does not use vite. The styles are not displayed anyway.

[winchesHe]

This does not work with nextjs as it does not use vite. The styles are not displayed anyway.

You can refer to PR modifications, the documentation is using nextjs

[chermme]

Any idea when we can expect the support for Tailwind v4? I'm just starting a new project and need to decide on the UI library and the lack of support for v4 holds me back on HeroUI (and I'd really like to use it).

[davidaragundy]

+1

[Error6929]

+1

[gurleensethi]

+1

[manasseh-zw]

+1!

[domhhv]

And yet another +1 for Tailwind v4 support.

I spent quite some time the other day troubleshooting unstyled HeroUI components in my new React project, only to realise that HeroUI currently only supports Tailwind v3.

It would be great to get an update on v4 support, as it's been out for a little while now.

[winchesHe]

And yet another +1 for Tailwind v4 support.

I spent quite some time the other day troubleshooting unstyled HeroUI components in my new React project, only to realise that HeroUI currently only supports Tailwind v3.

It would be great to get an update on v4 support, as it's been out for a little while now.

https://github.com/heroui-inc/heroui/runs/37864107262

You can update to the latest version, which now supports Tailwind CSS v4 and has fixed numerous issues

[phucngo2]

+1

[christophmeise]

And yet another +1 for Tailwind v4 support. I spent quite some time the other day troubleshooting unstyled HeroUI components in my new React project, only to realise that HeroUI currently only supports Tailwind v3. It would be great to get an update on v4 support, as it's been out for a little while now.

https://github.com/heroui-inc/heroui/runs/37864107262

You can update to the latest version, which now supports Tailwind CSS v4 and has fixed numerous issues

Did anyone manage to get this working, yet? I am getting runtime errors with this preview version when I set the tailwind content to "node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}""

[winchesHe]

And yet another +1 for Tailwind v4 support. I spent quite some time the other day troubleshooting unstyled HeroUI components in my new React project, only to realise that HeroUI currently only supports Tailwind v3. It would be great to get an update on v4 support, as it's been out for a little while now.

https://github.com/heroui-inc/heroui/runs/37864107262 You can update to the latest version, which now supports Tailwind CSS v4 and has fixed numerous issues

Did anyone manage to get this working, yet? I am getting runtime errors with this preview version when I set the tailwind content to "node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}""

Fixed in the latest version https://github.com/heroui-inc/heroui/runs/37994128721

[A-Raileanu]

I am using the latest version

"@heroui/react": "https://pkg.pr.new/@heroui/react@63afa9a"

and I am importing tailwind.config.js into my .css file:

@import 'tailwindcss';
@import '../fonts/inter.css';
@import '../../tailwind.config.js';

But when I try to npm run dev or npm run build I get:

[@tailwindcss/vite:generate:build] Invalid declaration: heroui``

Here is how my tailwind.config.js looks like:

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

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