Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature Request]Tailwind v4 support. #4644

Open
Tracked by #11794
, #35
...
iSaulX opened this issue Jan 25, 2025 · 21 comments · May be fixed by #4656
Open
Tracked by #11794
, #35
...

[Feature Request]Tailwind v4 support. #4644

iSaulX opened this issue Jan 25, 2025 · 21 comments · May be fixed by #4656
Assignees
@ryo-manba @winchesHe
Labels
🔦 Type: Feature New feature or request

Comments

@iSaulX
Copy link

iSaulX commented Jan 25, 2025

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

Image
How a Button is showing when using the new version of Tailwindcss.
@linear Linear
Copy link

linear bot commented Jan 25, 2025

ENG-1957 [Feature Request]Tailwind v4 support.

@wingkwong wingkwong added the 🔦 Type: Feature New feature or request label Jan 25, 2025
@MeetBhingradiya MeetBhingradiya mentioned this issue Jan 25, 2025
Closed
@Cierra-Runis Cierra-Runis mentioned this issue Jan 25, 2025
Closed
@qmonmert qmonmert mentioned this issue Jan 25, 2025
Draft
3 tasks
@viper3400 viper3400 mentioned this issue Jan 26, 2025
Open
@Butonix
Copy link

Butonix commented Jan 26, 2025 •
edited
Loading

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
Copy link

Cierra-Runis commented Jan 26, 2025 •
edited
Loading

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

This was referenced Jan 27, 2025
Open
Closed
@wingkwong wingkwong marked this as a duplicate of #4753 Jan 29, 2025
@labsvisual labsvisual mentioned this issue Jan 29, 2025
Closed
@wingkwong wingkwong marked this as a duplicate of #4767 Jan 30, 2025
@mathieubrd mathieubrd mentioned this issue Feb 1, 2025
Closed
@echoja echoja mentioned this issue Feb 2, 2025
Open
1 task
@rockey2020
Copy link
Contributor

same questions

@kkimdev
Copy link

kkimdev commented Feb 3, 2025

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
Copy link

When will the HeroUI version supporting Tailwind v4 be released?

@Butonix
Copy link

Butonix commented Feb 3, 2025

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
Copy link

anaooz commented Feb 8, 2025

looking forward to this!

@Error6929
Copy link

Tailwind CSS 3.4 or later

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

@toxsick toxsick mentioned this issue Feb 10, 2025
Open
@escapedcat escapedcat mentioned this issue Feb 10, 2025
Merged
@pppdns
Copy link

pppdns commented Feb 10, 2025

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
Copy link

Ronbb commented Feb 11, 2025

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

@kanethzero
Copy link

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

@slaby93
Copy link

slaby93 commented Feb 11, 2025 •
edited
Loading

+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
Copy link

Another vote for V4 support please!

🙏🙏🙏🙏🙏🙏🙏🙏🙏

@jmvie5 jmvie5 mentioned this issue Feb 11, 2025
Open
@aurora-lch
Copy link

+1

@winchesHe
Copy link
Member

winchesHe commented Feb 12, 2025 •
edited
Loading

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

@winchesHe
Copy link
Member

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

heroui-inc/vite-template#10

@Butonix
Copy link

Butonix commented Feb 15, 2025

Привет, ребята, я создал шаблон 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
Copy link
Member

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
Copy link

chermme commented Feb 19, 2025

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
Copy link

+1

@iSaulX iSaulX mentioned this issue Feb 21, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ryo-manba ryo-manba

@winchesHe winchesHe

Labels
🔦 Type: Feature New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: support tailwindcss v4 heroui-inc/heroui