Why is Everyone Talking About This CSS Framework?
ฝัง
- เผยแพร่เมื่อ 19 เม.ย. 2023
- There's a new kid on the block. Another CSS Framework. Can it live up to the high standard TailwindCSS had set years ago? Does it bring even more to the table?
My links
My GitHub: github.com/joschan21
Discord: / discord
Video links
UnoCSS: unocss.dev/
WindiCSS: windicss.org/
TailwindCSS: tailwindcss.com/
Very interested in hearing your thoughts on this. - วิทยาศาสตร์และเทคโนโลยี
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 3](http://i.ytimg.com/vi/A1XXYbV048k/mqdefault.jpg)
0:08 it did the same thing but much faster. JIT was the whole point.
0:22 no surprise, UnoCSS is made by the same people and it was always supposed to replace Windi
0:48 UnoCSS is not a replacement for taiwlind. @unocss/preset-wind is. UnoCSS can do non-tailwind stuff as well
2:36 You don't have to use the shortcuts
3:22 In UnoCSS itself, there is none but the default preset does come with some shortcuts. You don't have to use the default preset. There is an official preset that doesn't have this: @unocss/preset-wind
3:59 Once again UnoCSS (in this context) does not replace Tailwind, it replaces PostCSS
It seems odd to not want to switch for 5x better performance because it has an optional feature that you don't want to use.
@@AshutoshSharma-ml6sv Hhhhhhhhhhhuuuuuuuuuhhhhhhhhhh????????
This confused me as well since Tailwind can do the same when using @apply
I've just played around with UnoCSS, I like it, I think a follow up video on the differences and similarities would be cool.
It mixes all ui frameworks like bootstrap, tailwind, etc, into a single generated output.
There are some projects in which legacies used bootstrap, but as a new development, if we want to tailwind, it will generate two outputs, two css files, one is heavy bootstrap and another is stripped tailwind, so unocss, with help of plugins, aggregate all classes and styling into a single stripped bundled css
That's a cool feature for sure, not a reason to switch imo
@@joshtriedcoding yes, it isn't😅😅
I'm a hard-core tailwind fan myself 😅
Sorry, are you high? Where did you find out such absurd information? UnoCSS is a pure functional CSS framework, it has nothing to do with Bootstrap or anything else that you wrote, stop sharing misinformation and just read the docs
In tailwind you can use both too with the @apply directive
Guess what, Uno also has @apply
Tailwind is an architecture, a design language and a (rather messy) implementation of both. UnoCSS is an engine for your own css architectures & their implementations.
UnoCSS does come with a preset that mimics Tailwind by default but the benefit is that you can rather easily make your own presets that might work better for your projects. I can list many examples where this is useful:
- I built my own version of Tailwind that automatically handles light/dark mode colors and uses logical properties where possible.
- If you target older browsers you can make a preset that produces errors when you use utilities that are too modern.
- If there is a new CSS feature that is not supported by Tailwind yet (like scrollbar-color) you can very quickly implement it yourself.
On top of that UnoCSS is insanely well architected and you can chain a lot of extensions without any problems which allows you to use things like hover:(bg-blue-900 text-blue-50) with your own utilities.
UnoCSS is more than just better Tailwind, but even in cases when you want to use it like that, it still still much easier to customize and cover niche cases that the Tailwind team might not have though of.
source :- @starlederer
bottom line is that it is a great tool and people have a choice to stick to what they love.
It's great to see people who actually read the docs and understand what the tool is all about. Tailwind is a child toy compared to UnoCSS, I can't even compare them since they have absolutely different internal implementation
Isnt shortcuts the same as the @apply directive with Tailwind?
I'm sticking with Tailwind and Radix UI
Cool video!
Is there any UI kit for UnoCSS?
I have to disagree with you on this one, tailwind also has the shortcut counterpart where you combine atomic classes together with layer and apply. They are basically the same, and abstracting repetitive code is also useful
Can we create our own social media platform for developers with different design from others?
Great video. Personally, i'd be intrested to try Uno when procrastinating or something 😂😂... I have a vague memory of people not really liking tailwind all that much when it wasn't as popular (it had many config steps and wasn't out-of-the-box ready), I even had to force a dev to try it out once and then they ended up really liking it alot...so I think you'll never know 🙂
tailwind:
lg:w-full lg:h-full lg:flex lg:flex-col lg:justify-center
uno:
lg:(w-full h-full flex flex-col justify center)
And with Uno shortcuts you can have above as
lg:(full f-col center)
what are shadcn variants ?
How about chakra ui?
Idk the library but doesn't even in using UnoCSS shortcuts, the framework itself atomically replace the values in build ?. I would gladly stop rewriting a perticular code if it can be made into a component of its-own (like with CVA, stiches) if it doesn't compromise on the performance ( here atomic value extraction).
Uno is a pre build framework, it's not executed in prod, so there's no downgrades to performance
I will stick to Tailwindcss and Daisyui, they are great enough to meet the demands from all sorts of ui, life become so much easier because of these two libraries 😍👍😘😀😎🤩
Cheers, heard lots of positive feedback on DaisyUI recently
@maskman4821 How do you handle accessibility with DaisyUI ? Like pressing `Tab` to select list of items, pressing `Esc` to close a modal / dialog etc. ? Since DaisyUI is a CSS file at the end, how do you deal with this issue ?
Most of these new "solutions", libraries, frameworks etc. try and solve issues that were never issues to begin with.
you should talk about twind, its a css compiler that makes tailwind in js waay better
Josh, please make a playlist learning t3 stack from beginner to be hero
tailwind CSS also have the same thing(combining CSS classes in to one class using @apply) but they don't recommend it.
Who don't recommend it? This is direct recommendation from Adam Wathan
@@Andrey-il8rhAdam Wathan doesn't recommend using @apply
Uno isn’t a replacement for tailwind. It replaces postcss, which is what tailwind is build on, tailwind can be build on uno and it is with preset-wind
You argument around “abstract” vs “atomic” classes is a criticism of tailwind with daisy ui as well and even then it’s purely subjective
Give him some rest, the boy just a junior dev, he doesn't understand those tools good enough yet. Btw, UnoCSS works perfectly with PostCSS 😉
@@Andrey-il8rh considering they still call it experimental I wouldn’t say “perfectly” but yes you can use it with postcss as well.
@@kyuss789 I'm not talking about initializing Uno via PostCSS, what I mean is that you can use PostCSS along with it, for example to inline Uno output into HTML
Thanks Josh for your introduction for uno-css, but I think I'm sticking with Tailwind-css. Cause like you said uno-css is good but not better than Tailwind and Tailwind does so much more uses for now to me.
Uno css does a few things tailwind doesn't. Attributes, CSS icons, custom fonts. I think code with erik has a good video explaining the additional things.
Unocss is a superset of tailwind. It's like Typescript and Javascript.
Well, if you absolutely don't understand the principals behind UnoCSS yeah you better stay on Tailwind
@@saladmancer8151I would say it does all the things better than Tailwind 😂
You are doing great 👍 😊
Actually uno is not that new… has been there for a bit by now… is for the same guy that does vitest and other vue ecosystem tools, pretty good and smart dude to follow
*from
i dont see these approaches as opposing, daisy ui just abstracts extremely reusable items into 1 class, you can still add on with tailwind classes to it
Shortcuts is a feature, not a flaw. If it results in “code entanglement”, the blame for that falls on the developer using the e framework, not the features provided by the framework; especially when that feature is completely optional. Your rationale is unfair, borderline stupid. Everyone is free to use whatever they want, and I’m all for that. To clarify, I’m strictly criticizing the reason you gave for not wanting to use it, and not against you using whatever you like.
At the point that you're creating css classes like "btn" you're right back at writing normal css, so why even use Uno then. IMO using shortcuts or @apply in tailwindcss is an antipattern. Completely unnecessary since in web dev we design using libraries that use components.
@@roach_iam I see your point, but I wouldn’t say it’s completely unnecessary, and I wouldn’t say it’s like writing normal css. The framework is doing more underneath than just normal css (a simple example would be adding vendor prefixes when necessary). I can see myself wanting to use it in certain situations. Having it as a feature available to use for certain needs/situations when it makes more sense to do so is a good addition as a complimentary feature. If anyone sees this not needed, they can simply not use it without it having any negative impact on the development experience for choosing not to.
Jesus, guys, shortcuts is not a tool to create components like btn, it's a tool to create SHORTCUTS! Shortcut is a higher order utility, for example a lot of time you will have patterns in your utilities that frequently goes together like w-full h-full. For that you can have a shortcut - full.
Another example, almost always we have to write flex flex-col, why not shorten it to f-col? In the end we can have much shorter classes in HTML, but what's important we still use functional approach, shortcuts can also serve as unification layer between themes. Imagine that you have 2 themes in the project, each theme uses different headings style, so instead of creating a component for everything or some kind of a condition directly in your HTML you can create a shortcut themed-heading-1, when building first theme it will build to something like font-primary underline font-bold, and for another theme it can be font-secondary uppercase
First time I hear about it lol 😆 so much for everyone...
Yo do you prefer vite or next js?
Count me out too 😊
so now insted of using daisy ui + tailwind i can just use uno
And here we still are waiting for NextJS integration that isn't "meh"...
you mind elaborating?
this is wrong you can also make that feature "shortcut" in tailwind with the package cva
I'm not a fan of Adam from tw at all. First I got into a thing with him on Twitter when they were trying to charge early adopters an extra $20 for the e-commerce portion of tailwind-UI, which at the time was an extremely overpriced library, that gave you some pretty Meh components. He even somehow cross-referenced my twitter to get my email and then emailed me about it. He later changed his tune and said one price forever. Then they also ripped the JIT compiler by pretending to want to hire Anthony to get how he built the JIT compiler out of him. Then, later on, they had to be forced to give credit to him. Uno is quicker and does a way better job of making matchers for the classes than tw does. You can even just throw on script tag, where tw JIT is like 500kb gzipped the uno JIT is like under 20kb gzipped, you could potentially use it in production if you just had a simple HTML page. I believe it even has a way to eliminate the FLOC if you are using the script tag. I don't think TW is bad, I just don't like supporting the products of toxic people who like to create drama for self-serving reasons.
Js framework, css framework, typescript framework, omg 😂
uno is a great way to make mess
tailwind:
lg:w-full lg:h-full lg:flex lg:flex-col lg:justify-center
uno:
lg:(w-full h-full flex flex-col justify center)
How is uno making a mess ?
letting one use all ui framkeworks eg tailwind bootstrap, in one is surely not fail proof @@razorflash__
but UnoCss is not bad too :D
Tailwind CSS only
It's that time when a guy recorded a video after spending 3 minutes in docs, saw shortcuts, completely misunderstood it's purpose and decided to get this to TH-cam. Sad truth is that you can't know the difference between things you simply don't know. You don't know how Tailwind works and you don't know what is UnoCSS. Before recording any video on the topic you should first read at least 3 pages of the docs
sue your barber
bro just use objects to extract the styles const styles = {
btn: 'rounded-lg ...'
textSmall: '16px semibold .. '
}
And use them in ur components this frameworks are just a miss i personally prefer to use raw css
No matter how hard I try I just cant find myself liking tailwind or similar things. Your elements become so bloated with classes that it may as well just be inline styling. I think I will just stick to regular SaSS...
have you tried using utility functions like tailwind-merge and clsx?
I don't use any CSS Framework. Too much garbage in them even Tailwind, just look at the reset.
Reset is optional and can be disabled
This is a different approach, not right and wrong, but personal perspective. My perspective says, if a designer wants to get paid by the hour, Tailwind will fill the bank. If a designer wants to make the HTML ugly, Tailwind is the right tool for the job.
Again, there are tradeoffs. The right tool is based on the developer, designer, team, project, etc. Tailwind is awesome, but not always.
Describe cases when it's not
Tailwwind leaves fingerprints of the control freak, LOL. DaisyUI for instance is not anti-tailwind, but works with the strengths without leaving the fingerprints everywhere.@@Andrey-il8rh
I also want to say, try it before start having an opinion. You don't even know what it enables you do, don't trash on peoples hard work creating a 5min stupid video after scrambling around the library for 5min. Sure stick on to making things in your way but try to understand what is the real problem the library creator is trying to solve. What that means for the community. Don't be the fish in the tank.
Tailwind 4 will be like 3x faster than version 3.
And Tailwind 8 will be 25 times faster, right
@@Andrey-il8rh It will change engine, that's why.
@@jenstornell any specific scores that you provide at this point is pure speculation since it wasn't released yet. Change of the engine may easely result in 3x slower real world performance, you will never know until it's released
@@Andrey-il8rh Adam had a very good presentation about it. 😁
@@jenstornell of course Adam will place it in the best light, he is the most biased person since he is the author, but did you do any independent personal testing? Or you just repeated the advertisement?
TailwindCSS is a mistake. Don't get me wrong, is the best CSS framework right now by far, but it has no future, it can't improve, and is bad for complex stuff. But just wait, soon new CSS frameworks will emerge and change that.
aren't you guys tired of introducing new CSS framework were majority of companies won't even use?
We use unocss at my company
Kinda useless and boring that we keeps getting libraries like tailwind, none of them add an extra feature that really impress you to switch to it they are all the same with minor changes that you dont even feel or need
so you'd rather use hover: x hover:y hover: z hover: a like this rather than hover: (x y z a) ?
not a framework
unoCss is better.