Tailwind v4 Oxide <--> Skeleton v3 about skeleton HOT 6 CLOSED

@oneezy of course, but Tailwind v4 and Oxide is still VERY early days from their last public discussion on it and missing many features. I could easily see it being a year out or more. We very much do want to support the new approach to styling, but this will likely involves a large breaking change to do so. Including themes possibly returning back to a CSS-based format. So I anticipate this taking the predominate focus of a future Skeleton release - call it v4 or v5.

Again, this will be a ways out, so I'll go ahead close out this request. But essentially the shorter answer is "yes, when it's ready".

from skeleton.

You're completely right about light-dark() oneezy, but it only became "mainstream available" in the last Safari release.
If you check some of our other issues, we have people still using and wanting to support Macbooks from 2012.

As much as we'd love to simplify our lives like that, it's going to take a bit longer, I'm afraid...

from skeleton.

@endigo9740 , honestly i don't think it's as much of a breaking change as you might expect. I've been upgrading a few projects and I'm super impressed with how easy it's been!

here's a few words from the man himself:

https://x.com/adamwathan/status/1770979061721919598

"Shipped Tailwind CSS v4.0-alpha.10 today, which now uses CSS variables for each utility by default" ✨

https://x.com/adamwathan/status/1771914137615954352

"Really surprised by how many people think this is some dramatic shift in the framework! You have been able to use this approach to naming colors since the framework was released, and it's been in the documentation for years"

from skeleton.

@oneezy ahh, I quite Twitter/X a while back, so I'm out of the loop if they don't share on their blog or other mediums.

And yeah I'm thrilled for all the options and simplicity it brings to the table. But we're kind pushing the limits on what Tailwind can do in our plugin. Feel free to browse our v3 plugin for to see what I mean.
https://github.com/skeletonlabs/skeleton/tree/next/packages/skeleton/src/plugin

We use JS to loop through, generate, and implement whole swathes of features. So the new CSS syntax would be a detriment in many regards. Trying to maintain all this by hand would be a nightmare:
https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/plugin/utilities/color-pairings.ts

I hope to be wrong on this, but I don't think it'll be a trivial process for us. Especially if we need to maintain feature parity. But I do hope it helps streamline as much as possible. And we're down to start experimenting it as soon as it reaches some level of maturity and stability.

from skeleton.

@endigo9740 yeah I see what you mean! You would definitely need to think about a few things before you make a deep dive on an upgrade, but I do think it's possible. It would definitely be a nightmare maintaining all of that by hand! You could keep all the JS but instead generate CSS files instead. Whatever you need a utility class for, you would wrap in a @theme {} , (you would also do your overwrites, extends, ect. here). The @theme can only contain --properties but I believe it can be used everywhere.

Eventually whenever you have it sorted I think it would be as easy as importing your plugin:

/* app.css */
@import 'tailwindcss';
@import 'skeleton';

/* Themes */
@import 'skeleton/cerebus';

I mentioned this already in a TW 4 feature request, But you could make use of the light-dark() function for your color pairings. It's simplifies light and dark mode so much! I'm just getting my feet wet with it but I do see how all of this new stuff can be leveraged.

from skeleton.

hey @Sarenor , yeah it is brand new out of the box 😅 I randomly found it the other day.

With TW4 + Lightning CSS (included with v4) , i believe it's handled for you out of the box (replacing the need for postcss).

"Lightning CSS includes support for transpiling modern CSS syntax to support older browsers, including vendor prefixing and syntax lowering."

doing a quick search i found this:

• https://lightningcss.dev/transpilation.html#light-dark()-color-function
• tailwindlabs/tailwindcss#13698 (comment)
• https://vite-plugin-lightningcss.vercel.app/

from skeleton.