feat(tailwind): migrate to v4 #7507

bjohansebas · 2025-02-23T02:28:47Z

Description

Upgrade to tailwind-css major 4. And simplified use of postcss.

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 · 2025-02-23T02:28:52Z

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Mar 30, 2025 0:20am

apps/site/package.json

AugustinMauroy · 2025-02-23T10:58:29Z

something that may help you:

npx @tailwindcss/upgrade

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

bjohansebas · 2025-02-23T19:44:42Z

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

github-actions · 2025-02-23T22:38:19Z

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 · 2025-03-01T14:19:01Z

Hey @bjohansebas I assume this is still a WIP?

github-actions · 2025-03-01T14:20:31Z

Unit Test Coverage Report

Title	Lines	Statements	Branches	Functions
@node-core/ui-components		95.83% (161/168)	77.86% (102/131)	88.57% (31/35)
@nodejs/website		84.61% (495/585)	76.03% (165/217)	86.99% (107/123)

Title	Tests	Skipped	Failures	Errors	Time
@node-core/ui-components	24	0 💤	0 ❌	0 🔥	4.436s ⏱️
@nodejs/website	156	0 💤	0 ❌	0 🔥	6.184s ⏱️

bjohansebas · 2025-03-01T15:05:12Z

Yep, I'll continue with this later.

ovflowd · 2025-03-01T15:32:03Z

Yep, I'll continue with this later.

tysm for your contributions <3

apps/site/components/Common/Search/utils.ts

bjohansebas · 2025-03-01T18:44:31Z

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

AugustinMauroy · 2025-03-01T18:51:02Z

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

apps/site/tailwind.config.ts

avivkeller · 2025-03-29T16:43:17Z

packages/ui-components/styles/theme.css

+  --shadow-lg:
+    0px 4px 6px -2px var(--color-shadow, rgba(0, 0, 0 / 3%)),
+    0px 12px 16px -4px var(--color-shadow, rgba(0, 0, 0 / 8%));
+  --font-open-sans: var(--font-open-sans);


Is this going to cause a Catch-22? (As in, is --font-open-sans going to depend on itself?)

Can you re-add my TODO comment?

Ditto for IBM Plex Mono

I'm sorry Aviv, but I have no idea what you mean.

Sorry, let me explain:

Catch-22: We are setting --font-open-sans to --font-open-sans. Is this going to end up having it depend on itself, and do nothing, i.e. if you run var a = a in JS (where a is not defined), or is that not the case in CSS?

I had a TODO comment on the Tailwind config file, can you re-add it to this part of the CSS?

avivkeller · 2025-03-29T22:38:56Z

I've denied some changes on Chromatic, if you could take a look:

Pagination has lost it's green color (i.e. https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=67e874b4b8c794928f6d6905)
Notifications have lost their shadow (i.e. https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=67e874b4b8c794928f6d6947)
The background for blog-post images has been squished (i.e. https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=67e874b4b8c794928f6d6955)
The text size got jumbled (https://www.chromatic.com/test?appId=64c7d71358830e9105808652&id=67e874b4b8c794928f6d69d5)

AugustinMauroy · 2025-03-29T22:41:49Z

Yes, I had just made the same list by private message Sebastian on slack but I'm waiting for claudio's validation for the changes on the package.json before going further

vercel bot had a problem deploying to Preview February 23, 2025 02:29 Failure

AugustinMauroy reviewed Feb 23, 2025

View reviewed changes

apps/site/package.json Outdated Show resolved Hide resolved

vercel bot had a problem deploying to Preview February 23, 2025 22:38 Failure

vercel bot had a problem deploying to Preview February 23, 2025 23:08 Failure

vercel bot had a problem deploying to Preview February 24, 2025 00:31 Failure

ovflowd added the github_actions:pull-request label Mar 1, 2025

github-actions bot removed the github_actions:pull-request label Mar 1, 2025

ovflowd deployed to Storybook March 1, 2025 14:18 — with GitHub Actions View deployment

vercel bot had a problem deploying to Preview March 1, 2025 15:59 Failure

vercel bot had a problem deploying to Preview March 1, 2025 16:17 Failure

vercel bot had a problem deploying to Preview March 1, 2025 16:44 Failure

bjohansebas commented Mar 1, 2025

View reviewed changes

apps/site/components/Common/Search/utils.ts Outdated Show resolved Hide resolved

vercel bot had a problem deploying to Preview March 1, 2025 18:13 Failure

vercel bot had a problem deploying to Preview March 1, 2025 18:42 Failure

vercel bot had a problem deploying to Preview March 2, 2025 22:04 Failure

bjohansebas force-pushed the tailwind-update branch 4 times, most recently from 908dbb9 to 9859b48 Compare March 2, 2025 22:26

vercel bot had a problem deploying to Preview March 2, 2025 22:28 Failure

AugustinMauroy added the github_actions:pull-request label Mar 29, 2025

vercel bot had a problem deploying to Preview March 29, 2025 15:06 Failure

github-actions bot removed the github_actions:pull-request label Mar 29, 2025

AugustinMauroy had a problem deploying to Storybook March 29, 2025 15:06 — with GitHub Actions Failure

vercel bot had a problem deploying to Preview March 29, 2025 15:15 Failure

vercel bot had a problem deploying to Preview March 29, 2025 15:23 Failure

AugustinMauroy changed the title ~~[WIP]: tailwind v4~~ feat(tailwind): migrate to v4 Mar 29, 2025

avivkeller reviewed Mar 29, 2025

View reviewed changes

vercel bot deployed to Preview March 29, 2025 22:28 View deployment

bjohansebas added the github_actions:pull-request label Mar 29, 2025

github-actions bot removed the github_actions:pull-request label Mar 29, 2025

bjohansebas deployed to Storybook March 29, 2025 22:29 — with GitHub Actions View deployment

ovflowd marked this pull request as ready for review March 30, 2025 00:18

ovflowd added the github_actions:pull-request label Mar 30, 2025

github-actions bot removed the github_actions:pull-request label Mar 30, 2025

ovflowd deployed to Storybook March 30, 2025 00:19 — with GitHub Actions View deployment

vercel bot deployed to Preview March 30, 2025 00:20 View deployment

bjohansebas and others added 6 commits March 30, 2025 01:20

chore(tailwind): update to v4

5b7e7b7

fix: dark theme

8a48794

simplify postcss

c3eebdd

fix: using good source

bd6a61f

fix: lock-file

9a68a4f

chore: cleaned package.json

c52e14b

ovflowd force-pushed the tailwind-update branch from c282c65 to c52e14b Compare March 30, 2025 00:23

ovflowd added the github_actions:pull-request label Mar 30, 2025

github-actions bot removed the github_actions:pull-request label Mar 30, 2025

ovflowd deployed to Storybook March 30, 2025 00:24 — with GitHub Actions View deployment

vercel bot deployed to Preview March 30, 2025 00:25 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tailwind): migrate to v4 #7507

feat(tailwind): migrate to v4 #7507

bjohansebas commented Feb 23, 2025 •

edited by AugustinMauroy

Loading

vercel bot commented Feb 23, 2025 •

edited

Loading

AugustinMauroy commented Feb 23, 2025

bjohansebas commented Feb 23, 2025

github-actions bot commented Feb 23, 2025

ovflowd commented Mar 1, 2025

github-actions bot commented Mar 1, 2025 •

edited

Loading

bjohansebas commented Mar 1, 2025

ovflowd commented Mar 1, 2025

bjohansebas commented Mar 1, 2025

AugustinMauroy commented Mar 1, 2025

avivkeller Mar 29, 2025

AugustinMauroy Mar 29, 2025

avivkeller Mar 29, 2025 •

edited

Loading

avivkeller commented Mar 29, 2025

AugustinMauroy commented Mar 29, 2025

feat(tailwind): migrate to v4 #7507

Are you sure you want to change the base?

feat(tailwind): migrate to v4 #7507

Conversation

bjohansebas commented Feb 23, 2025 • edited by AugustinMauroy Loading

Description

Check List

vercel bot commented Feb 23, 2025 • edited Loading

AugustinMauroy commented Feb 23, 2025

bjohansebas commented Feb 23, 2025

github-actions bot commented Feb 23, 2025

ovflowd commented Mar 1, 2025

github-actions bot commented Mar 1, 2025 • edited Loading

Unit Test Coverage Report

bjohansebas commented Mar 1, 2025

ovflowd commented Mar 1, 2025

bjohansebas commented Mar 1, 2025

AugustinMauroy commented Mar 1, 2025

avivkeller Mar 29, 2025

Choose a reason for hiding this comment

AugustinMauroy Mar 29, 2025

Choose a reason for hiding this comment

avivkeller Mar 29, 2025 • edited Loading

Choose a reason for hiding this comment

avivkeller commented Mar 29, 2025

AugustinMauroy commented Mar 29, 2025

bjohansebas commented Feb 23, 2025 •

edited by AugustinMauroy

Loading

vercel bot commented Feb 23, 2025 •

edited

Loading

github-actions bot commented Mar 1, 2025 •

edited

Loading

avivkeller Mar 29, 2025 •

edited

Loading