Like what you see? Want to get early access to videos and replies! Click here -> kzitem.info/rock/shZ3rdoCLjDYuTR_RBubzwjoin
@dannycabrera8466
Жыл бұрын
This seems like an easy way for teams to lose consistency in stying rules
@TheWatcher-mo4ml
Жыл бұрын
First thing I said to myself. This looks like a great way to create a really confusing mess.
@MobiusCoin
Жыл бұрын
@given8708 yeah especially how p-3 in Bootstrap is equivalent to p-4 in Tailwind. I'm for utility classes, whatever your framework/library but I don't see the benefit of blending them.
@mikescholz6429
Жыл бұрын
I’m good at that on solo projects lol
@joseandkris
Жыл бұрын
Agreed. They should have options of disabling what u don't plan to use? And disable bootstrap by default, come on it's 2023
@muadzrosli
Жыл бұрын
Bootstrap still relevant today because what it is made for: quick ui build. For example, my boss wants me to make a demo web app with certain functionality fast so that he/she can demo the web app to client, I would choose component framework like bootstrap or vuetify. It would that a lot of time to build the ui if using tailwindcss. I have used both and I know which benefits which situation. That’s why bootstrap still exists and being used until now
@SXsoft99
Жыл бұрын
i just got the hang of tailwindcss with vite........ now i see this, god damn it
@bombrman1994
11 ай бұрын
as a solo developer thats not even working with a team I find this scary territories when you give such flexibility for inconsistencies to exist
@kalebercanbrack8857
Жыл бұрын
I love uno's configuration experience. Especially the dynamic shortcuts and rules. Its also cool that you don't need PostCSS for it, though there is a plugin available. I've noticed its somewhat common in Deno projects, maybe for that reason?
@thiagomadureirabraga
Жыл бұрын
Erik, this video is short and simple while giving us a very good first understandment of UnoCSS. Congrats!
@Alexithymiander
Жыл бұрын
Love your KZitem channel.
@ProgramWithErik
Жыл бұрын
Thanks!
@LuckyStilet1
Жыл бұрын
As intro would be enough to say who created it. And maybe for new adepts short CV actually who it is.
@ProgramWithErik
Жыл бұрын
Good point, on my next one.
@LuckyStilet1
Жыл бұрын
@@ProgramWithErik he is new legend, imho) Thanks for video btw!
@nested9301
3 ай бұрын
t has alot of bugs i tested so many times it's weird
@wagnermoreira786
Жыл бұрын
When I saw the title i thought it would be a tool that does the things that tailwind doesnt do, im gonna have yl research and create a Library myself then
@ProgramWithErik
Жыл бұрын
What would you look for?
@wagnermoreira786
Жыл бұрын
@@ProgramWithErik something that can read dynamic class names composed from variables, something that offers a decent api for animations, and supports the other css features that tailwind doesn't (it doesn't support everything)
@akshattamrakar9071
Жыл бұрын
Looks similar to all other css frameworks
@hyperprotagonist
Жыл бұрын
And unifies it into one… which is the point.
@DCSt90j
Жыл бұрын
This can mess up your code pretty quickly, especially using the attribute 'feature'
@ProgramWithErik
Жыл бұрын
I like it, what don't you like about it?
@ericvandruten
Жыл бұрын
I see mixed reactions in the comment section.
@ProgramWithErik
Жыл бұрын
Yeah, some people like it. Some don't! That's ok!
@businessoftechnology
Жыл бұрын
What, is this the newest AI? It seems to be more ready than much of the AI that has been popular lately. Great share, kudos.
@adrianlineweaver4725
Жыл бұрын
why? lol why?
@ProgramWithErik
Жыл бұрын
Why not?
@adrianlineweaver4725
Жыл бұрын
@@ProgramWithErik what is the advantage of mixing all these css frameworks when you can achieve all that using just tailwind
@vicitacious
Жыл бұрын
Bloaty
@iskandar.bakshi
Жыл бұрын
09:32 dude what on earth you know odnoklassniki?
@ProgramWithErik
Жыл бұрын
huh?
@ProgramWithErik
Жыл бұрын
No idea why that came out of VSCode.
@iskandar.bakshi
Жыл бұрын
@@ProgramWithErik odnoklassniki means classmates is a social media from russia, but not only russia all CIS used it to find old classmates, I searched for sc-odnoklassniki it's a class name for some html elements in their code, I thought maybe you did some freelance for them:d
@sshnavin
Жыл бұрын
Thanks for making this video, i'm sure creators had their reasons for building this but I see this as something bringing more chaos than value, if you need 3 different engines in a project you're making terrible design choices.
@moonfo_dev
Жыл бұрын
in my opinion, it just makes things complicated. imagine you are working in a team. then you see different kinds of classes and syntax everywhere and your app will be unpredictable 😖
@kaffutheine7638
Жыл бұрын
Then just use one preset, never use bootstrap preset with tailwind/windi presets
@moonfo_dev
Жыл бұрын
@@kaffutheine7638 so, then what's the point of using UnuCSS when we don't want to use two libraries
@kaffutheine7638
Жыл бұрын
@@moonfo_dev unocss give you more speed and some other feature than windi or tailwind.
@2dstencil847
6 ай бұрын
@@kaffutheine7638 Nevertheless, CSS expert in the team, can handle most stuff of CSS is still the best scenario.. Frontend, at least 40% of problem is from Design / CSS itself (Unless the project is past 3.0 version and dont have huge change like 1.0, 2.0)
@michalfrantisek
Жыл бұрын
Tailwind CSS is my professional choice. It gives me everything I need to style a web page.
@ProgramWithErik
Жыл бұрын
It is good! ^_^
@dragonred3576
Жыл бұрын
the only disaster of tailwindcss is it,s too slow,especially when you save many files and set "lint on save".
@JEsterCW
Жыл бұрын
@@dragonred3576 buy new setup 😂
@cryptoboy1461
Жыл бұрын
Thank you, but I don't see anything enticing that would change my mind about using this over TW.
@rentefald
Жыл бұрын
What is wrong with just building your own CSS?
@utubetvux5170
Жыл бұрын
I use Unocss for all of my project. 10/10
@ProgramWithErik
Жыл бұрын
Nice!
@wlockuz4467
Жыл бұрын
This seems novel but pretty impractical. I don't really see the point of introducing multiple conventions to do the same thing, it will only end up creating confusion and slowing down development. Tailwind has somehow struck the perfect balance between abstraction, flexibility and consistency and I am yet to see something that even comes close to it in terms of productivity and scalability.
@kyuss789
Жыл бұрын
I think you may have dove in to deep to what UnoCSS can do but missed all benefits. The “why” section of the docs does a great job of explaining the difference, pros and cons. A simple explainer would be “tailwind is a design system using atomic css classes, UnoCSS is a atomic css engine to help you build something like tailwind (see the preset-wind)”
@ProgramWithErik
Жыл бұрын
Good point! I could have gotten more into the why, this was more of a tutorial and my take. Also the docs update literally the day I dropped this video. They didn't have the why section, when I was researching it.
@Remeroska
Жыл бұрын
Erik, I love your videos, but I think you misguided a lot of people by showing how you can use multiple classes style together, that is something that is possible doing in unoCSS but it's neither convenient nor advised. You can do it, sure, but you shouldn't. The power of unoCSS comes from all the other features it has over tailwind for example but also by the fact that is super slim and super fast.
@theanswer1993
Жыл бұрын
Why is everyone trying to replace Tailwind? It's not going anywhere.
@breezycodes
Жыл бұрын
My only concern is using this on a team of 10+ people... I see problems lol
@ProgramWithErik
Жыл бұрын
Could be true! What sort of problems do you forsee?
@breezycodes
Жыл бұрын
@ProgramWithErik different in writing styles.. I guess the team would have to write a guide on how to write styles for the project.. for example, don't use attributes as styles.. or.. use icon names as attributes vs class names
@thespacejedi
Жыл бұрын
@@ProgramWithErik there's a reason why we have things like eslint and prettier. Consistent standards are what drives teams forward. UnoCSS is a step backwards and really only good for hobby projects
@ShaqarudenGames
Жыл бұрын
I do not see the value in UnoCSS. Why would I ever want to mix any of these together? IMO those developers wasted their time
@18.j
Жыл бұрын
Pretty useless, all bootstrap rules u applied are already available in tailwind 🤦🏻♂️ idk why people like to overwhelm themselves with a lot of useless packages i mean if there's at leat few advantages over tailwind i would switch but there's nothing
@heroe1486
Жыл бұрын
This, or at least the video hasn't shown anything substantial besides inline custom values, but tailwind supports arbitrary values too
@gdm_music
2 күн бұрын
Dude you need to be more careful when doing explainer, it was really hard to understand
@michaeldausmann6066
Жыл бұрын
will having access to multiple utility class vocabularies at once make my life less or more complicated? Is conflating html attributes with style attributes (via the attribution plugin thing) going to make it less or more difficult for a new dev, or myself in 6 months? To me, these things seem to be a bad idea.
@ProgramWithErik
Жыл бұрын
It's not for everyone.
@fennecbesixdouze1794
Жыл бұрын
If I were trying to come up with some sort of April-fool's joke to make fun of everything wrong with frontend developers, a CSS framework that allows you to use both bootstrap and tailwind utility classes at the same time would be the most outlandishly stupid thing I could think of as a satire.
@mohammadrezamrg9380
11 ай бұрын
how to integrate with typescript and angular?
@heroe1486
Жыл бұрын
It's been a while since we can use arbitrary values with tailwind and thus do things like text-[30px]
@greendsnow
Жыл бұрын
preset-uno = preset-windi windi-css is not tailwind-css. there are areas that they are not compatible with each other.
@ProgramWithErik
Жыл бұрын
Thanks! That's a good clarification. There are something that aren't 100% compatible, but it looks the majority of the classes are the same. preset-uno also comes with preset-mini which includes the dark other variants.
@paulopma
Жыл бұрын
Front end devs should stop suffering from this ADHD industry
@tarilonte
6 ай бұрын
Seems odd to me to use more than one css library in the same project.
@mrrolandlawrence
Жыл бұрын
been using it for a while. unoCSS is great! been using it as my standard for a while now.
@ProgramWithErik
Жыл бұрын
Nice!
@blackpurple9163
Жыл бұрын
I find tailwind perfect for css, it's adding the javascript to these components that makes it difficult for me, like bootstrap has components pre-made with javascript and animations included, tailwind doesn't have that
@regibyte
Жыл бұрын
Bootstrap comes from a different era when the apps were not fully built with javascript therefore it provides functionality support for the components cause that's how they were used in the "past". Tailwind was born in the era of components, regardless if you're using vue, react, svelte or whatever the idea is that you'll build the behavior for your components anyway so tailwind has no saying in that, specially because tailwind has no components per see. It's just a paradigm shift, we have multiple libraries tailored for the tailwind style, these are called headless libraries. Just to name a few: - HeadlessUI (from the creator of tailwind itself) - React Aria - Radix These libraries have in common that they only provide the behavior and leave the styling to the developer, it fits nicely with tailwind because of that. Anyway I hope to have provided some value
@blackpurple9163
Жыл бұрын
@@regibyte thank you very much, I needed to know this, now I can finally customize all the components to my liking I've been looking at material-tailwind library and DevUI library (a newly released tailwind component library), if you have time, please check these out and share your thoughts on these as well, as you're coming from using headless libraries, I'd like to know your opinion as a developer and whether I should use these libraries or the ones I mentioned, I'm very new to web development and want to make all my apps accessible and responsive as well as animated (I don't want to build apps without transition animations that just jump into different states)
@regibyte
Жыл бұрын
@@blackpurple9163 Hey thanks for sharing these two, I wasn't aware of them. Material-tailwind seems like a good library if you like material design, I'm personally not a fan of libraries that provide components rather than style classes, but it's a personal preference. DevUI seems like a better option specifically for this reason, it's a component library that uses the standard classes from tailwind, this makes it very easy to port the code to another frameworks like vue, svelte if needed. I understand your wish to create acessible and beautiful UIs with transitions and stuff, it's very nice to see that you value these things, a lot of developers don't, specially acessibility. A perfect library that provides component classes is DaisyUI, it's a plugin for tailwind that adds component classes with the standard classes, it doesn't export ready-to-use components like Material-Tailwind but it's very easy to use and it includes some gorgeous transitions. In the end it all comes down to your experience, if you don't have a lot of experience crafting your own components for reusability I would go with something that already provides them like Material-tailwind, If you need something custom tailored for your use-case you are better off writing your own components. One last thing I'd like to mention is about animations/transitions, the HeadlessUI library provides a transition component that is very easy to use on your own projects and it allows you to create various kinds of transitions. Another great option for complex animations (react-specific) is framer motion, this one is a little bit more complicated but it has support for very complex and coordinated animations, I recommend you take a look and see it with your own eyes, may be just what you're looking for. Anyway cheers! good studying my friend, let me know if you'd like any other advices
@blackpurple9163
Жыл бұрын
@@regibyte I had looked into framer motion and three.js but I'm not at a level where I'll be able to write code and debug all the issues generated due too these libraries as fast as I'd like Thank you for your response, I saw a free videos mentioning daisyUI but a lot of them said that there's better alternatives, and since I'm still learning, I am currently focusing more on strengthening my react logic instead of UI design, for convience, headless libraries are very good, and some libraries allow us to customize even more, but that's for later part when I have a stable job, currently I'm still learning and looking for jobs, so your input is highly appreciated
@cyrollin8435
Жыл бұрын
Just choose one preset if you want only tailwind in unocss anyway
@drewbird87
Жыл бұрын
Ah man! Thank you for going into this. I've been wondering what some of the advantages are of using this over using something like TW. Do you know if Uno works with the arbitrary selectors/values from tailwind?
@slava_trushkin
Жыл бұрын
Yes, it should support everything. You probably can just move existing project without issues. Furthermore, unlike Tailwind, it treats all values as arbitrary instead of small set, so you can write stuff like `ml-12345` and it will work.
@MobiusCoin
Жыл бұрын
This doesn't solve my issues with Tailwind. First, I love Tailwind, I love utility first CSS, I love the JIT compiler. My main issue with Tailwind is that it doesn't have support for user generated CSS. If a user in a CMS types "mb-4" but nowhere in my code have I also used "mb-4" that user does not have access to that utility class. The user only has access to the classes I previously used as a the developer. Now I can add a bunch of common classes to Tailwind's config's "safelist" but that kinda defeats the purpose of the JIT compiler. But Uno doesn't address this problem. As for using other library's utility classes... I mean... okay, but why? Why would I want that? I just spent the last 3 months migrating from Bootstrap's utility system to Tailwind. (Protip: to avoid name collision, set a prefix in Tailwind config so you can incrementally migrate, i.e. you can have both "p-3" and "tw-p-3", the former from Bootstrap and the latter from Tailwind without issue during the middle of a migration). As for using arbitrary values. Tailwind can do that already with the [] modifier. As for creating your design system, you can customize Tailwind values in the config, so again, not really a feature. Now if UnoCSS can provide true runtime recompilation, then yes, I would absolutely jump ship. But as of right now, it offers a bunch of features I wouldn't use or don't really think are real features.
@jessieonfly
Жыл бұрын
You should create your components class using tailwindcss.
@MobiusCoin
Жыл бұрын
@@jessieonfly I usually just create components instead of creating component classes with @apply
@wlockuz4467
Жыл бұрын
Whats a practical use case for the first scenario?
@MobiusCoin
Жыл бұрын
@@wlockuz4467 Any time a content editor or designer needs some custom styling on a piece of content (i.e. special spacing for their images, absolute positioning for an SVG they've embedded in their articles, etc etc). Basically any time when the developer and the content owner don't work together (which is the case in in several situations).
@phojie6868
Жыл бұрын
This will happen if you don't read docs. Tsk
@Vali615
Жыл бұрын
Feels like writing `style=""` in different places...
@ProgramWithErik
Жыл бұрын
I find it handy !
@tisanefruitrouge9512
Жыл бұрын
Your thoughts on Doctor WHO ???
@ProgramWithErik
Жыл бұрын
Love it, big fan. Can't wait for the new Doctor! Last doctor was just OK
@manutopik
Жыл бұрын
Unocss is really awesome ! I use it for every projects !
@injSrc
Жыл бұрын
It is basically Tailwind on steroids
@banwa_non
11 ай бұрын
thanks for this, I just moved to Unocss from TW and BS. I will keep Bootstrap around just in case I need something super quick but Unocss has become my main. TY!
@neutralitat2570
Жыл бұрын
I would call it not unocss, but MAKE MORE clutter css 😂
@ProgramWithErik
Жыл бұрын
Nice one!
@codedjango
Жыл бұрын
Phew....this is so confusing....I think I will just stick to Tailwind
@ProgramWithErik
Жыл бұрын
What’s confusing about it?
@codedjango
Жыл бұрын
Attributes and class names thanks to attributify
@hxg.1
Жыл бұрын
UnoCSS Extension isn't working as it should be. I'm not getting any of the IntelliSense...
@DhanushkaC
Жыл бұрын
as it seems, UnoCSS was created because Tailwind has a great support with React & Nuxt xD
@deathmaxxx
Жыл бұрын
yeah good luck to anyone who comes after, to work with that code, where four libraries are mixed together.
@rvft
Жыл бұрын
Yeah putting that question mark at the end of a silly question totally makes the video not a click bait
@JenuelDevTutors
Жыл бұрын
windicss
@MadukaJayalath
Жыл бұрын
Great contents! Can you please volume up?
@ekmanhsieh
Жыл бұрын
It looks like tailwind css ‘s brother
@shayanzamani9907
Жыл бұрын
5:06 We do also have CSS logical properties in Tailwind!
@amirulidzham
Жыл бұрын
Awesome content, perhaps a little awkward when using it as a attribute instead of class
@ProgramWithErik
Жыл бұрын
That's what I hear, I sort of like it, but I understand
@cyrollin8435
Жыл бұрын
For me its great for security, mostly for make other dev confused 🥴
@groovebird812
Жыл бұрын
Why tailwind? Is Inline CSS the best practice? Some utility classes are great but Not so bloated HTML with hundreds of classes
@goosydev
7 ай бұрын
Quiet the opposite, you usually dont have "hundreds" of classes but rather 3-5. And if the styles are right on the html its easier to change and debug than jumping back and forth between .css files. And lastly when you get used to tailwind (max 2 weeks) you will write styles 10x faster than before.
@sno-oze
Жыл бұрын
unocss have worse intellisense: in tailwind i write bgred500 and I see hint bg-red-500, when in unocss I write the same... and we see nothing
@ProgramWithErik
Жыл бұрын
Interesting, that could be true. It works pretty well for me though, I know bg is background so I just type that and it shows all the options.
@nested9301
Жыл бұрын
unocss is useless next
@sim_scape
Жыл бұрын
why ?
@zazazazadze9933
Жыл бұрын
The last several seconds of this video says it all
@NeverCodeAlone
Жыл бұрын
Wow, so cool.....thx a lot!!
@Voidstroyer
Жыл бұрын
Honest opinion: 1. It is cool to have the css utilities of different frameworks in one place, but it is completely unnecessary. 2. It is cool to have attributes function as classes, but why not just use classes directly? 3. It is cool to have custom html tags function as classes, but why not just use classes directly? the 1st point I listed is probably the only part that I think is good about it, because the other parts don't just make writing css more complicated, it makes writing html more complicated. It's basically tailwind with some extra stuff that nobody really asked for
@ProgramWithErik
Жыл бұрын
All good points. I think it can save you time. The style props is really handy ;
@ProgramWithErik
Жыл бұрын
Another reason you might consider using style props/attributes functions is that you can group your common CSS utility classes together. Or add your own unique CSS rule you setup in it. I didn't go over rules in the videos, but you can completely override any utility class, or make your own.
@Voidstroyer
Жыл бұрын
@@ProgramWithErik Yeah I get that. Being able to group css classes based on specific type of content is definitely great. I guess it's something that I would have to try out for myself to know if it's worth it or not. I felt the same about Tailwind before I started to use it myself. I was very skeptical at first.
@MrCC-hx8xr
Жыл бұрын
Absolutely not. Why? One of the WindiCSS creators going his own way? I've had a couple of queries on WindiCSS in issues - no response + small community. Use one man's FW? Tailwind just has too strong a background and community already, I'm staying. Eric, you stepped wrong ;)
@ProgramWithErik
Жыл бұрын
What did I step wrong?
@MrCC-hx8xr
Жыл бұрын
At least the headline looks like clickbait (like you're glorifying a Tailwind knockoff that has more drawbacks than advantages. I examined the video very quickly, but didn't notice anything there that was noteworthy compared to TW. Even the conclusion from you was bland, except that it has everything, but TW has that too, plus the advantag es mentioned. Otherwise, no offense, I like watching your videos, have a nice day.
@wabathur
Жыл бұрын
For people with "lose consistency" problem, your project config is terrible with/without unocss/tailwindcss anw.
@ProgramWithErik
Жыл бұрын
I'm not sure I understand, the vite config was to show how to use all the unocss features. Why is it terrible?
@ashishkulkarni2520
Жыл бұрын
@@ProgramWithErik She's not talking about your project config, but of the general public who are complaining about "inconsistent" apis and what not
@justintagorda704
Жыл бұрын
still Tailwindcss!
@henrycovil2629
Жыл бұрын
*cool stuff*
@bravesirrobin9576
Жыл бұрын
Even just the elevator pitch gives me
@ProgramWithErik
Жыл бұрын
Gives you what?
@darialyphia
Жыл бұрын
tailwind was never necessary KEKW
@heesel4089
Жыл бұрын
Each their own. I like backend more than frontend and Tailwindcss makes building UI much easier for me
@hugazo
Жыл бұрын
Can you still use the @apply directive on the style tag?
@ProgramWithErik
Жыл бұрын
Yes, I believe so
@hugazo
Жыл бұрын
@@ProgramWithErik thanks. Gonna use it in my new pet project im doing
@笼屉啊笼屉
Жыл бұрын
You look so slim and fabulous!
@ProgramWithErik
Жыл бұрын
Thanks! I did lose some weight
@kklowd
Жыл бұрын
I don't get it
@ProgramWithErik
Жыл бұрын
What don't you get?
@Jdinrbfidndifofkdndjoflfndjdk
Жыл бұрын
Mantine
@ProgramWithErik
Жыл бұрын
?
@ModifiedMusicYT
Жыл бұрын
This is all nice but personally I like the control of just using CSS. Personally I use SCSS with functions and mixin's to make life easier rather than having several classes on an element. plus with react (idk vite, angular, etc.) pretty sure you don't need to import Sass or compile it so it's a bigger win for me. Just import variables, functions, mixin's from a different project and change as needed.
@JEsterCW
Жыл бұрын
Lmao
@RaulReyesOnline
Жыл бұрын
Big power comes with big responsibilities, I don’t see how this will benefits junior developers without the experience and having to deal with other issues such as accessibility
@Suriprofz
Жыл бұрын
uno sucks for big apps.
@UncleDavid
Жыл бұрын
why can’t y’all use titles like “UnoCSS, a tailwind inspired library!” lol always gotta be some corny this vs that or “this changes everything!” and don’t shit even change
@ProgramWithErik
Жыл бұрын
Thanks for the feedback! I might change the title, but it's blowing up right now, and people seem to be watching it
@AgentZeroNine1
Жыл бұрын
Jesus, another CSS framework? Yeah, I'll stick with just using customer properties + import assertions for native CSS modules for my components. Ignoring these fast food frameworks really lightened my projects and made web development less of a headache.
@RodrigoDAgostino
Жыл бұрын
Couldn’t agree more! :) And on top of that, I’ve never been able to actually enjoy using a CSS framework (even though I’ve tried plenty), since there are always pain points to take in consideration when working with them. Plain CSS (or SCSS actually :P) makes everything easier and more straightforward :)
@jessypouliot8374
Жыл бұрын
DONT SHIP UnoCSS TO PRODUCTION! How is UnoCSS better than TailwindCSS ? The Windi integration is basically the same as default TailwindCSS without the brackets (text-30px VS text-[30px]). Why would you even want seperate way to do margins tailwind VS bootstrap ? or "preset-tagify" are you looking for CSS in class or tag names ? class names are GOOD. Don't reinvent the wheel (also probably very bad in React if it exists) This will make the codebase very hard to maintain and certainly create bugs. The UnoCSS plugin is basically a ripoff of the TailwindCSS plugin. Tailwind has proven it's worth, UnoCSS is just a fork with unecessary features.
@programmerarnab9046
Жыл бұрын
This gonna make newbies crazy
@heroe1486
Жыл бұрын
More like experienced devs who don't like switching libraries every 6 months for little to no (by watching the video) benefits, just for the sake of adding bloat, noobs are those chasing new shiny things
@andreaho
Жыл бұрын
Tailwind is far better than Uno. Only if you work with 10-member teams or more, you'd realize how much Tailwind saved your ass.
Пікірлер: 163