[WIP]: tailwind v4 #7507
[WIP]: tailwind v4 #7507
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
something that may help you: and for css module: https://tailwindcss.com/docs/compatibility#css-modules |
|
Yep, with that I made the first commit, I thought it was going to do most of the work |
|
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. Thank you! |
github-actions
bot
removed
the
github_actions:pull-request
|
Hey @bjohansebas I assume this is still a WIP? |
Unit Test Coverage Report
Unit Test Report
|
|
Yep, I'll continue with this later. |
tysm for your contributions <3 |
|
I think I'll continue after you all have done the migration to the new version of Next.js. |
|
@bjohansebas bump claudio had merge the pr. You can have fun with git conflict 😁 |
bjohansebas
force-pushed
the
tailwind-update
branch
4 times, most recently
from
908dbb9 to
9859b48
Compare
| announcement: tailwindConfig.theme.colors.green['700'], | ||
| release: tailwindConfig.theme.colors.info['600'], | ||
| vulnerability: tailwindConfig.theme.colors.warning['600'], |
There was a problem hiding this comment.
I think I know how to make this work, I'll do it another day.
| @@ -1,3 +1,5 @@ | |||
| @reference "../../../../styles/index.css"; | |||
There was a problem hiding this comment.
Why is this necessary? Can you point to docs?
There was a problem hiding this comment.
There was a problem hiding this comment.
I mean, can you write the reference of these like // @see ....
| @import './locals.css'; | ||
| @import './locals.css' layer(utilities); | ||
|
|
||
| @theme { |
There was a problem hiding this comment.
Maybe export all these colors to a theme.css fle
| --animate-pulse: pulse 500ms infinite alternate-reverse; | ||
| --animate-pulse-dark: pulse-dark 500ms infinite alternate-reverse; | ||
|
|
||
| @keyframes surf { |
There was a problem hiding this comment.
Id move all of these animations to an animations.css
| @import './base.css'; | ||
| @import './markdown.css'; | ||
| @import 'tailwindcss'; | ||
| @import './base.css' layer(utilities); |
There was a problem hiding this comment.
Id be good to explain what these "layer" keywords mean
There was a problem hiding this comment.
No idea, it was done by the Tailwind upgrade tool, which didn’t really help much either.
| scrollbar-width: thin; | ||
| } | ||
|
|
||
| @utility max-w-8xl { |
There was a problem hiding this comment.
That class was not recognized by Tailwind, maybe it never existed, since it was set in the configuration file of version 3.
|
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 Worth opening an issue on Tailwind repo tho. |
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 this check is done it's maybe a bug |
|
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?
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 |
|
The |
bjohansebas
force-pushed
the
tailwind-update
branch
from
e689a4d to
e30f46d
Compare
bjohansebas
force-pushed
the
tailwind-update
branch
from
e30f46d to
dbadcff
Compare
bjohansebas
force-pushed
the
tailwind-update
branch
from
dbadcff to
a689eee
Compare
|
Sorry, I had to squash all the commits. It was getting complicated to do a rebase without losing all the work. |
|
So just update to Tailwind 4.0.12? |
Per the docs, we shouldn't import everything, just the theme tokens. Which seems to mean, only the tokens need to be imported. |
|
Finally compiled, I'm really happy! |
github-actions
bot
removed
the
github_actions:pull-request
|
Lighthouse Results
|
Description
Updated to Tailwind 4 :), still a work in progress
Check List
npm run formatto ensure the code follows the style guide.npm run testto check if all tests are passing.npx turbo buildto check if the website builds without errors.