Is Tailwind CSS No Longer Needed? A Look Into UnoCSS!
HTML-код
- Опубликовано: 2 июн 2024
- #unocss #uno #tailwindcss
Today I take a look at UnoCSS a atomic utility class engine. How does the hype hold up? Is it worth trying.
In this tutorial I get UnoCSS up and running on a Vue 3 vite app. I look at several presets, including
@unocss/preset-uno
@unocss/preset-tagify
@unocss/preset-icons
@unocss/preset-attributify
👉Check out my last video on Tailwind vs Mui vs Quasar
• Tailwind vs MUI vs Qua...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
👉 Need some help with a project, level up your skills, Vuetify or Nuxt bug? Check out my 1-on-1 mentoring!
mentors.to/erik
Follow me!
/ erikch
Links:
github.com/unocss/unocss
Like what you see? Want to get early access to videos and replies! Click here -> ruclips.net/channel/UCshZ3rdoCLjDYuTR_RBubzwjoin
This seems like an easy way for teams to lose consistency in stying rules
First thing I said to myself. This looks like a great way to create a really confusing mess.
@@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.
I’m good at that on solo projects lol
Agreed. They should have options of disabling what u don't plan to use? And disable bootstrap by default, come on it's 2023
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
Tailwind CSS is my professional choice. It gives me everything I need to style a web page.
It is good! ^_^
the only disaster of tailwindcss is it,s too slow,especially when you save many files and set "lint on save".
@@dragonred3576 buy new setup 😂
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.
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?
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.
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!
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 😖
Then just use one preset, never use bootstrap preset with tailwind/windi presets
@@kaffutheine7638 so, then what's the point of using UnuCSS when we don't want to use two libraries
@@moonfo_dev unocss give you more speed and some other feature than windi or tailwind.
@@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)
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)”
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.
Thank you, but I don't see anything enticing that would change my mind about using this over TW.
What is wrong with just building your own CSS?
been using it for a while. unoCSS is great! been using it as my standard for a while now.
Nice!
I use Unocss for all of my project.
10/10
Nice!
Unocss is really awesome ! I use it for every projects !
It's been a while since we can use arbitrary values with tailwind and thus do things like text-[30px]
how to integrate with typescript and angular?
i just got the hang of tailwindcss with vite........ now i see this, god damn it
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
Wow, so cool.....thx a lot!!
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?
Great contents! Can you please volume up?
Love your RUclips channel.
Thanks!
Can you still use the @apply directive on the style tag?
Yes, I believe so
@@ProgramWithErik thanks. Gonna use it in my new pet project im doing
Erik, this video is short and simple while giving us a very good first understandment of UnoCSS. Congrats!
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.
It's not for everyone.
5:06
We do also have CSS logical properties in Tailwind!
As intro would be enough to say who created it.
And maybe for new adepts short CV actually who it is.
Good point, on my next one.
@@ProgramWithErik he is new legend, imho)
Thanks for video btw!
*cool stuff*
UnoCSS Extension isn't working as it should be.
I'm not getting any of the IntelliSense...
The last several seconds of this video says it all
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.
You should create your components class using tailwindcss.
@@jessieonfly I usually just create components instead of creating component classes with @apply
Whats a practical use case for the first scenario?
@@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).
This will happen if you don't read docs. Tsk
Seems odd to me to use more than one css library in the same project.
Yeah putting that question mark at the end of a silly question totally makes the video not a click bait
Awesome content, perhaps a little awkward when using it as a attribute instead of class
That's what I hear, I sort of like it, but I understand
For me its great for security, mostly for make other dev confused 🥴
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.
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
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
@@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)
@@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
@@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
Just choose one preset if you want only tailwind in unocss anyway
Looks similar to all other css frameworks
And unifies it into one… which is the point.
Even just the elevator pitch gives me
Gives you what?
preset-uno = preset-windi
windi-css is not tailwind-css. there are areas that they are not compatible with each other.
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.
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
What would you look for?
@@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)
It is basically Tailwind on steroids
My only concern is using this on a team of 10+ people... I see problems lol
Could be true! What sort of problems do you forsee?
@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
@@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
Your thoughts on Doctor WHO ???
Love it, big fan. Can't wait for the new Doctor! Last doctor was just OK
yeah good luck to anyone who comes after, to work with that code, where four libraries are mixed together.
This can mess up your code pretty quickly, especially using the attribute 'feature'
I like it, what don't you like about it?
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
All good points. I think it can save you time. The style props is really handy ;
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.
@@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.
Feels like writing `style=""` in different places...
I find it handy !
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.
It looks like tailwind css ‘s brother
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
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.
as it seems, UnoCSS was created because Tailwind has a great support with React & Nuxt xD
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.
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
still Tailwindcss!
Why is everyone trying to replace Tailwind? It's not going anywhere.
Phew....this is so confusing....I think I will just stick to Tailwind
What’s confusing about it?
Attributes and class names thanks to attributify
You look so slim and fabulous!
Thanks! I did lose some weight
This gonna make newbies crazy
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
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
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.
Lmao
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.
Why tailwind? Is Inline CSS the best practice? Some utility classes are great but Not so bloated HTML with hundreds of classes
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.
windicss
I see mixed reactions in the comment section.
Yeah, some people like it. Some don't! That's ok!
tailwind was never necessary KEKW
Each their own. I like backend more than frontend and Tailwindcss makes building UI much easier for me
I don't get it
What don't you get?
Mantine
?
I would call it not unocss, but MAKE MORE clutter css 😂
Nice one!
For people with "lose consistency" problem, your project config is terrible with/without unocss/tailwindcss anw.
I'm not sure I understand, the vite config was to show how to use all the unocss features. Why is it terrible?
@@ProgramWithErik She's not talking about your project config, but of the general public who are complaining about "inconsistent" apis and what not
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 ;)
What did I step wrong?
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.
Front end devs should stop suffering from this ADHD industry
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
This, or at least the video hasn't shown anything substantial besides inline custom values, but tailwind supports arbitrary values too
why? lol why?
Why not?
@@ProgramWithErik what is the advantage of mixing all these css frameworks when you can achieve all that using just tailwind
Bloaty
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.
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 :)
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
Thanks for the feedback! I might change the title, but it's blowing up right now, and people seem to be watching it
unocss is useless next
why ?
uno sucks for big apps.
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.
09:32 dude what on earth you know odnoklassniki?
huh?
No idea why that came out of VSCode.
@@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
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.