Comments (6)
@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.
Related Issues (20)
- Integration: Data Visualization HOT 2
- v3 Custom Theme Doc Errors
- v3 Tailwind > Gradients CSS button has broken link
- Review "RestProps" spread method for arbitrary attributes HOT 3
- v3 Switch Component - Quick Patch
- computed styles not being applied HOT 3
- Repeated word in Docs HOT 1
- Audio/video components
- Svelte v5 RC: InputChip component produces errors HOT 9
- v3 React AppBar does not follow export conventions HOT 1
- v3 - consistency -D and --save-dev HOT 8
- TreeView - Custom Icons. HOT 1
- Carousel seems broken on doc page HOT 1
- Refactor React components to fall more inline with existing React libraries HOT 4
- RFC: Remove return types from React components
- A little bit of white peeking out on the progress bars (styling issue) HOT 4
- InputChips does not have restProps HOT 2
- Table of Contents: support setting scrollTarget, scrollOffset HOT 1
- AppRailTile on:click not working (v2.10.1) HOT 5
- Revert missing on:click event for App Rail Anchor Tile component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skeleton.