[WIP]: tailwind v4

[bjohansebas]

Description

Updated to Tailwind 4 :), still a work in progress

Check List

• [] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [] I have run npm run format to ensure the code follows the style guide.
• [] I have run npm run test to check if all tests are passing.
• [] I have run npx turbo build to check if the website builds without errors.
• [] I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Mar 22, 2025 2:42am

[AugustinMauroy]

something that may help you:

npx @tailwindcss/upgrade

and for css module: https://tailwindcss.com/docs/compatibility#css-modules

[bjohansebas]

Yep, with that I made the first commit, I thought it was going to do most of the work

[github-actions]

Note

Your Pull Request seems to be updating Translations of the Node.js Website.

Whilst we appreciate your intent; Any Translation update should be done through our Crowdin Project.
We recommend giving a read on our Translation Guidelines.

Thank you!

[ovflowd]

Hey @bjohansebas I assume this is still a WIP?

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	88.75% (742/836)	76.1% (242/318)	87.65% (142/162)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
182	0 💤	0 ❌	0 🔥	5.808s ⏱️

[bjohansebas]

Yep, I'll continue with this later.

[ovflowd]

Yep, I'll continue with this later.

tysm for your contributions <3

[bjohansebas]

I think I'll continue after you all have done the migration to the new version of Next.js.

[AugustinMauroy]

@bjohansebas bump claudio had merge the pr. You can have fun with git conflict 😁

[avivkeller]

Just reviewed the visual tests, and it looks like the following noticeably different changes have occurred:

Description	Link
Shadow removed	View Test
Color missing	View Test
Sizes changed	View Test

I've also noticed that when clicking headers, they turn green. They didn't do that before.

[avivkeller]

Hey! I just wanted to give you a heads-up that I’m putting this PR on hold until #7401 merges. That one already has approval, no conflicts, and I’m planning to merge it on Monday, unless something unexpected comes up.

I don’t think this PR will be able to merge before then, so I’m marking it as "on hold" for now. That said, feel free to keep working on it—this just means it won’t be merged until #7401 lands.

Thanks for your patience! 😊

---

The CSS files in the ui-components library are identical to the ones in apps/site, so it should be as simple as moving the files to rebase, but if you need help, I'm available to take a look.

[bjohansebas]

I would still need to rebase to resolve the conflicts that exist at the moment. I'll wait until your PR is merged to do everything at once.

[avivkeller]

Thanks for your patience, @bjohansebas! If you need any help rebasing, please let me know.

[bjohansebas]

Sure, I plan to do the rebase this weekend, hopefully it won't be too hard.

Likewise, I'm going to squash all the commits to make the rebase easier.