Feature/tailwind v4 update

[Roene-JustBetter]

WIP - Tailwind update to version 4.

[royduin]

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

[Roene-JustBetter]

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.

[Roene-JustBetter]

I have have checked the docs about using @source.
https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned

So we have to make use of the @source: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources./
So I tried this:

@source "../../vendor/rapidez/**/*.blade.php";
@source "../../vendor/rapidez/**/*.css";
@source "../../vendor/rapidez/**/*.vue";

@source '../../resources/views/**/*.blade.php';
@source '../../resources/css/**/*.css';
@source '../../resources/js/**/*.vue';

@source '../../../../config/rapidez/frontend.php';
@source '../../vendor/rapidez/core/config/rapidez/frontend.php';
@source '../../../../config/rapidez/menu.php';
@source '../../../../vendor/rapidez/menu/config/rapidez/menu.php';
@source '../../../../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/tailwind.blade.php';

But this work partly
This works correct and generated the classes from the core:

@source '../../resources/views/**/*.blade.php';
@source '../../resources/css/**/*.css';
@source '../../resources/js/**/*.vue';

The problem is that styling from vendor packages like account doesn't work:

@source "../../vendor/rapidez/**/*.blade.php";
@source "../../vendor/rapidez/**/*.css";
@source "../../vendor/rapidez/**/*.vue";

The issue is that we are using symlinks and that is not working correctly. I double checked this with @indykoning and we found this: tailwindlabs/tailwindcss#16765

[Roene-JustBetter]

Looks like the @source is still nog working good. I have tried this inside Rapidez (so not inside the Core):

This works:
@source "../../vendor/rapidez/account/resources/views/account/**/*.blade.php";

This doesn't work:
@source "../../vendor/rapidez/*/resources/views/account/**/*.blade.php";.

The problem is with the /*/

Looks like this is the same issue: tailwindlabs/tailwindcss#17601

[royduin]

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.

Demo: https://play.tailwindcss.com/kwKsPPfh8q?file=css

[royduin]

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

[indykoning]

We're being blocked by the following 2 issues:

• Tailwind V4 does not support custom classes in @apply `@apply`Broken in Tailwind CSS v4.0 – No Clear Fix or Docs! tailwindlabs/tailwindcss#16429
• Tailwind V4 does not seem to resolve aliasses in @source or any other custom directives (like @reference which could've fixed issue 1) [v4] Resolve @import or @source from vite.resolve.alias tailwindlabs/tailwindcss#15159