Feature/tailwind v4 update #741
Conversation
Roene-JustBetter
requested review from
royduin and
indykoning
as code owners
| function color(variable, fallback) { | ||
| return 'color-mix(in srgb, var(' + variable + ', ' + fallback + ') calc(100% * <alpha-value>), transparent)' | ||
| } | ||
|
|
||
| export default { | ||
| content: [ |
There was a problem hiding this comment.
Did you try this? https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources, Laravel is also using this: https://github.com/laravel/laravel/blob/12.x/resources/css/app.css
There was a problem hiding this comment.
I tried using the @source in the app.css inside the Rapidez/core But I didn't managed to load styling from other vendor packages like rapidez/menu or rapidez/account.
| --color-conversion: color-mix(in srgb, var(--conversion, #22c55e) calc(100% * 1), transparent); | ||
| --color-conversion-text: color-mix(in srgb, var(--conversion-text, #fff) calc(100% * 1), transparent); | ||
| --color-foreground-emphasis: color-mix(in srgb, var(--foreground-emphasis, #0f172a) calc(100% * 1), transparent); | ||
| --color-foreground: color-mix(in srgb, var(--foreground, #1e293b) calc(100% * 1), transparent); |
There was a problem hiding this comment.
As per: https://tailwindcss.com/docs/colors#referencing-in-css and previously within the tailwind.config.js we can reference existing colors;
--color-foreground: color-mix(in srgb, var(--foreground, var(--color-slate-800)) calc(100% * 1), transparent);Demo: https://play.tailwindcss.com/QB164GxvSS
Seems like we don't need the color-mix(), Tailwind is handeling that for us now
--color-foreground: var(--foreground, var(--color-slate-800));Demo: https://play.tailwindcss.com/yslYTQCdL6?file=css
But... with this it's a bit weird to have --color-foreground and --foreground, maybe change everything to be inline with Tailwind, so prefix all colors and only use --color-foreground
Demo: https://play.tailwindcss.com/IUMpQQ8KCa?file=css
Another update; undocumented but it's still possible to scope colors to utilities:
--foreground: var(--color-slate-800);
--text-color-default: var(--foreground);This way bg-foreground doesn't work, as it should.
| @utility text { | ||
| color: var(--text-color); | ||
| } | ||
| @utility text-emphasis { | ||
| color: var(--text-color-emphasis); | ||
| } | ||
| @utility text-muted { | ||
| color: var(--text-color-muted); | ||
| } |
There was a problem hiding this comment.
With the scoped colors we don't need this, only text doesn't work by default so that one should stay. But... it doesn't support the opacity modifier (eg text/50), see: tailwindlabs/tailwindcss#16824
For the time being, the "full version" does support it: text-default/50
WIP - Tailwind update to version 4.