[WIP]: tailwind v4 #7507

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

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

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

Name	Status	Preview	Updated (UTC)
nodejs-org	❌ Failed (Inspect)		Mar 3, 2025 2:44am

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

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.406s ⏱️

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 😁

… index.css

ovflowd · 2025-03-03T02:45:32Z

apps/site/components/Common/AlertBox/index.module.css

@@ -33,7 +33,7 @@
  }

  .title {
-    @apply rounded-sm
+    @apply rounded-xs


Did the values change between xs and sm?

see https://tailwindcss.com/docs/upgrade-guide#renamed-utilities

ovflowd · 2025-03-03T02:45:52Z

apps/site/components/Common/LanguageDropDown/index.module.css

@@ -19,8 +19,7 @@
  @apply max-h-80
    w-48
    overflow-hidden
-    rounded
-    border
+    rounded-sm border


Suggested change

rounded-sm border

rounded-sm

border

ovflowd · 2025-03-03T02:46:10Z

apps/site/components/Common/Select/index.module.css

@@ -15,14 +15,14 @@
  }

  .trigger {
-    @apply inline-flex
+    @apply r
+      ounded-sm


Suggested change

ounded-sm

rounded-sm

bjohansebas · 2025-03-03T02:46:31Z

This is almost done, the only thing is that I still haven't managed to get Next.js to compile. It throws an error (not sure if it's still due to the Tailwind configuration or a bug in Tailwind). The development mode is already working for the most part.

ovflowd · 2025-03-03T02:46:54Z

apps/site/components/Common/Select/index.module.css

      h-11
      w-full
      min-w-[17rem]
-      items-center
-      justify-between
+      items-center justify-between


Suggested change

items-center justify-between

items-center

justify-between

ovflowd · 2025-03-03T02:49:05Z

apps/site/.stylelintrc.mjs

@@ -43,5 +43,7 @@ export default {
    'import-notation': 'string',
    // Allow the `@apply` at rule as its part of Tailwind
    'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
+    'at-rule-no-unknown': null,


We already have a rule with at-rule-unknown. Please remove this one.

ovflowd · 2025-03-03T02:49:19Z

apps/site/.stylelintrc.mjs

@@ -43,5 +43,7 @@ export default {
    'import-notation': 'string',
    // Allow the `@apply` at rule as its part of Tailwind
    'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],


Suggested change

'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],

'at-rule-no-deprecated': [true, { ignoreAtRules: [CUSTOM_AT_RULES] }],

ovflowd · 2025-03-03T02:49:39Z

apps/site/.stylelintrc.mjs

@@ -43,5 +43,7 @@ export default {
    'import-notation': 'string',
    // Allow the `@apply` at rule as its part of Tailwind
    'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
+    'at-rule-no-unknown': null,
+    'function-no-unknown': null,


Instead of disabling the rule, please provide the correct functions that should be allowlisted.

ovflowd · 2025-03-03T02:50:29Z

apps/site/components/Blog/BlogHeader/index.module.css

-      w-full
-      items-center
-      justify-between;
+    @apply inline-flex w-full items-center justify-between;


Please do not inline the styles.

Sorry, my auto formatter played a trick on me.

(For the whole file)

bjohansebas · 2025-03-03T02:50:32Z

apps/site/app/[locale]/next-data/og/[category]/[title]/route.tsx

-  announcement: tailwindConfig.theme.colors.green['700'],
-  release: tailwindConfig.theme.colors.info['600'],
-  vulnerability: tailwindConfig.theme.colors.warning['600'],


I think I know how to make this work, I'll do it another day.

ovflowd · 2025-03-03T02:50:52Z

apps/site/components/Common/AvatarGroup/Avatar/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";


Why is this necessary? Can you point to docs?

see https://tailwindcss.com/docs/upgrade-guide#using-apply-with-vue-svelte-or-css-modules

I mean, can you write the reference of these like // @see ....

ovflowd · 2025-03-03T02:54:19Z

apps/site/styles/index.css

-@import './locals.css';
+@import './locals.css' layer(utilities);
+
+@theme {


Maybe export all these colors to a theme.css fle

ovflowd · 2025-03-03T02:54:32Z

apps/site/styles/index.css

+  --animate-pulse: pulse 500ms infinite alternate-reverse;
+  --animate-pulse-dark: pulse-dark 500ms infinite alternate-reverse;
+
+  @keyframes surf {


Id move all of these animations to an animations.css

ovflowd · 2025-03-03T02:55:00Z

apps/site/styles/index.css

-@import './base.css';
-@import './markdown.css';
+@import 'tailwindcss';
+@import './base.css' layer(utilities);


Id be good to explain what these "layer" keywords mean

No idea, it was done by the Tailwind upgrade tool, which didn’t really help much either.

ovflowd · 2025-03-03T02:55:23Z

apps/site/styles/index.css

+  scrollbar-width: thin;
+}
+
+@utility max-w-8xl {


This was removed?

ovflowd · 2025-03-03T03:04:26Z

Yeah something weird is broken. The instructions seem super simple: https://tailwindcss.com/docs/installation/framework-guides/nextjs

Not sure if this has any effect, https://github.com/nodejs/nodejs.org/blob/main/apps/site/next.config.mjs#L96 or if it is due to something you're importing or not? Maybe it could be those @reference's?

Worth opening an issue on Tailwind repo tho.

AugustinMauroy · 2025-03-03T12:24:38Z

Not sure if this has any effect, https://github.com/nodejs/nodejs.org/blob/main/apps/site/next.config.mjs#L96

Nope I already faced to this issue. Basically tailwind is broken with css-module and tailwind maintainer don't care and didn't recommend to use it.

First tings to check:

if there are any pure selector for example : p or &:hover
if ref is correctly done

if this check is done it's maybe a bug

ovflowd · 2025-03-03T12:29:29Z

I have the feeling maybe because we do the @reference on each CSS module file? 🤔 which provably tries to bundle the whole thing on every css module file?

Nope I already faced to this issue. Basically tailwind is broken with css-module and tailwind maintainer don't care and didn't recommend to use it.

A lot of people use CSS modules. Could tou reference where the maintainer said they did not care about it?

AugustinMauroy · 2025-03-04T09:55:00Z

A lot of people use CSS modules. Could tou reference where the maintainer said they did not care about it?

About maintainer position it's personal feeling. but about css module https://tailwindcss.com/docs/compatibility#performance

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 Trigger Pull Request Checks label Mar 1, 2025

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks 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

refactor: reorder CSS properties and update references to index.css

e3eb8a5

bjohansebas force-pushed the tailwind-update branch from ad5f1c0 to e3eb8a5 Compare March 2, 2025 23:03

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

refactor: update color variables and font variable names

f27c932

vercel bot had a problem deploying to Preview March 3, 2025 00:38 Failure

chore: update tailwindcss to version 4.0.9

e1cbbd9

vercel bot had a problem deploying to Preview March 3, 2025 00:59 Failure

refactor: remove tailwind.config.ts and migrate gradient utilities to…

6966e08

… index.css

vercel bot had a problem deploying to Preview March 3, 2025 01:50 Failure

refactor: migrate utilites to v4

e689a4d

vercel bot had a problem deploying to Preview March 3, 2025 02:44 Failure

ovflowd reviewed Mar 3, 2025

View reviewed changes

bjohansebas commented Mar 3, 2025

View reviewed changes

ovflowd reviewed Mar 3, 2025

View reviewed changes

apps/site/styles/index.css

scrollbar-width: thin;

}

@utility max-w-8xl {

Copy link

Member

ovflowd Mar 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was removed?

	'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
	'at-rule-no-deprecated': [true, { ignoreAtRules: [CUSTOM_AT_RULES] }],

[WIP]: tailwind v4 #7507

Are you sure you want to change the base?

[WIP]: tailwind v4 #7507

Conversation

bjohansebas commented Feb 23, 2025

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

Unit Test Coverage Report

Unit Test Report

bjohansebas commented Mar 1, 2025

ovflowd commented Mar 1, 2025

bjohansebas commented Mar 1, 2025

AugustinMauroy commented Mar 1, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bjohansebas commented Mar 3, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ovflowd commented Mar 3, 2025 • edited by AugustinMauroy Loading

AugustinMauroy commented Mar 3, 2025

ovflowd commented Mar 3, 2025

AugustinMauroy commented Mar 4, 2025

vercel bot commented Feb 23, 2025 •

edited

Loading

ovflowd commented Mar 3, 2025 •

edited by AugustinMauroy

Loading