Is Tailwind CSS No Longer Needed? A Look Into UnoCSS!

I have been asked over and over again to try out UNO CSS as being a really cool way to add utility classes to your apps but it just doesn't do that it's a whole engine and it creates not just Tailwind but it also does bootstrap it also adds classes for tachyon and windy so I thought I would check it out and see if it lives up to the height so I'm going to create an app using it I'm going to install it I'm going to show you the presets and plugins that you should use if you want to use it and uh I'm gonna give you my opinion on it so watch all the way to the end so as I've been playing around here I went through the official documentation so Uno CSS as it says is an instant on-demand Atomic CSS engine and the way it works it's very similar to Tailwind in the way that has these utility classes that you can add into any attribute that adds in your margins and paddings animations things like that but what makes this Uno CSS different is it kind of combines a bunch of these different types of utility class systems like windy and tachyon and tailwind and it gives you these plug-ins or what they're calling in here called presets which allow you to add more functionality to it and you can kind of mix and match what presets you want inside your app so I think the best way to kind of demonstrate how Uno CSS works and why I'm really liking it so far is to give it a shot inside my app here Uno CSS works with view but you can use this in react smelt pretty much all the major Frameworks it supports and it supports it inside of V2 so I'm going to use a Veet app here with view three but this is actually going to be a very similar way you set it up for react too if you're using react with beat and so we're gonna with these presets the kind of the one that you want to use if you're using Uno CSS Uno CSS is to use the preset Uno one this will give you like the majority of the features that you want to use so first inside your app here I'm going to open up the terminal and I'm just going to do this npm Dash I Dash D no ocss and this will install normal presets not the community ones and dash D4 it's a developer dependency so after you run that I already did that for this app you need to go and do a little bit of configuration so inside the vconfig I'm going to import in and actually I'm going to import in Uno CSS just like this and then inside your plugins right here at the bottom we can add in Uno CSS and it has this object here and it has one of the first ones you want to use this presets and this presets will be an array of the presets you want to do and just think of presets like plugins and so the first one you want to use is this preset Uno one to use that one you can from Uno CSS and if you look here you just type in preset you have all these different presets so preset Uno as you can see here is the default one so now I have preset Uno here I can add it in preset Uno now one thing I found really useful when using Uno CSS is to install a couple extensions uh one of which is this called iconify so I would install this one it's by Anthony Foo I'd also install the Uno CSS one by Anna Anthony Foo and this will make it so that you have that really nice autocomplete now when I was using this I found a a problem that I had the Tailwind for intellisense extension installed at the same time and those two were conflicting so I disabled the tail Tailwind one and only used the Uno CSS one so if you're watching right now I would and using vs code following along install the Uno CSS and then iconify one well there's one more thing you have to do it mentions right here you have how you need to add import Uno CSS in your main entry so don't forget to not do that so we'll go to the main TS and I'll Import in Uno CSS and so if I do that no more errors in the console and if I come back over here to my beat app all right so I just have this main hello world here nothing too special I don't know uh so I'm gonna add another div I'm going to do a test here and let's see if we can play around with this test so with this text so I see test here on the side I can add a class to it now the nice thing is now we have access to not just Tailwind utility classes but we have access to bootstrap classes so first let's just check out Tailwind so if we wanted to add in like a Tailwind utility class it's already built in Uno CSS we don't have to like add another Library so I'll do margin left I don't know 10. and you can see here it added a margin left to the 10 there if I wanted to I know text Gray let's do green cool now it's Tech screen 800 I could do text extra large let's do 5xl cool so you can see here that all these classes that we use for Tailwind work another nice and you can also see since we have that Uno CSS extension installed we have this nice preview it tells us the CSS it's generating but we can also do other things let's say today we wanted to use bootstrapped so they have ms-2 I believe so that adds in like margin spacing if I come over here yeah do margin inline start so you can see here I can add this inline margin in line spacing that you might be used to if you're using bootstrap also tachyon has this wave like I can do ma5 and this does like margin 1.25 so you can have tachyon also windy CSS like if I do margin top and then I just put in pixels which is kind of cool I can do 40 pixels here it added 40 pixels to the top this is also nice too if you wanted to do text I don't know 30 pixels it just adds it in there it's just part of of uh windy CSS so you have kind of access now all these utility libraries in one which is pretty powerful I think uh and now and it's all built in and when it compiles it's only going to include the CSS that you use and not any CSS you don't use so I think that's that's the first thing that kind of really makes this stand stands this out because it's super simple to use and you have now a ton of different utility classes you can use in your app now let's say you wanted to use another one of our presets here so another one I found really uh helpful is this present preset attribute file in the vconfig I'm going to add in here preset you can see it's already here preset attribute 5. and I just need to add it here now it should be added into my Veet config and I'll go back to the app view it allows you to kind of group similar things together so let's say I have like two texts in here so so we go back to our app we have this test here and I have this text 30 pixels but let's say I do text Orange 400. so now I have this text orange here so I can actually add attributes to my div tag to make this a little easier so I'm going to put in text equals here and I'm going to put in Orange 400 and you can still see I'm still seeing the uh the intellisense and and if doing everything there and also I can put in 50 pixels I guess in this case 30 pixels and now I can just delete this class all together oops let me fix my beat config I need a closing bracket okay oops I fixed some of my column here for my beat config I went back in here so cool so you can see here it's working I have 30 pixels and if I change this to 50 pixels it's working as I expected it which is really neat now another thing you can do is like say I have a div here I have another div and inside here I know I have a test one and then I have a test two so I have these two but I want to add Flex to it so you can almost add in like style props in here so I can just type in flex and this will add it in as Flex I can also add in I don't know justify Center and It Centers it on the screen here uh which is really cool uh you know you have now able to add these in so now you have these attributes that you can just add in as like style props to your uh to your attributes which is really cool and it's it just makes things really easy for things like hover so if I wanted to add a hover in here I still put this in my class so I'll put a class in here so a blue hover and I'll do I don't know text color let's do yeah gray now if I go hover over it so it still works this is where I would probably still use class for some things and then use these uh attributes for other things so another one that I want to recommend is iconify so you can install all these icons and if I do an npm i and I'll do iconify Dash Json and then the icon set so this one has pretty much hundreds of different icon sets I'm gonna go through them all but if you go through the GitHub you can find them so I'm going to install one called EI which is just a random icon set that I found and then after you do this I'm going to restart the server again uh you can go into your beat config and you can install this preset for icons so I'm going to come back up here preset icons and right here I'm gonna do the same thing I'm gonna go preset icons and if I go back to my app view I can now start using icons so in this class here basically the class will act as the icon I Dash e i Dash and then a name of the icon so I don't know we'll do pointer and you can see here right away you can see you could show it right here it's this is a part of the extension that we installed for iconify so it shows it in vs code and if you look at the app so now you can see here this is the eye and then you can also add in other attributes so I don't know maybe we do height of 50 and a width of 50. so now we have a big old icon of a hand we can also put some colors to it so text color let's do text purple and now it's purple uh we can even do hover effects on it if we want to do text orange 200 so now you can see here and this is all done just using classes that we add on to here so mix it just really really easy and you can have access to any sort of pointer any sort of icon in this set and then use it really quickly and so it's pretty powerful and there's also a lot of configurations you can do with it so one nice thing you can do you can actually make tags to be names of of your icons so let me show you how that works so if I go to I'll save it here I'm gonna go to beat config and I have one more preset I want to install and that is called the preset tagify and then I'll add it to here preset tagify and then I'll go back to I'll save it and then I'll go back to app view when I create my tags I can just call it the name of the of the class so I can do that I Dash e i Dash and now I have a actually autocompletes for me so I can find out what it is let's say I want to do Chevron and if I do that and I do need it in you have to set this in the settings but I just do uh for this one I do block so make it a block so it shows up so here cool I have this uh this uh this icon here so I can do H50 let's see here we'll do h40 and width 40 so now we have our Chevron up so I could do that right using a tag and you can you can do it for other things so if you have an element that just has one class on it I could do a text red here red text now I have red text on here I'm using basically tags and I'm making them the classes themselves so it's it's pretty neat what you can do here uh there is some nice Community ones too if I come back here there's Community ones for like Daisy if you're into Daisy UI there's scroll bar hiding there's a whole bunch of things but I think if I'm starting a new project and I want to try out one of these utility class libraries I probably just go with Uno CSS because it has everything

Channel: Program With Erik

Views: 58,399

Keywords: UnoCSS, UnoCSS tutorial, Atomic engine, Utility class frameworks, UnoCSS vs Tailwind, UnoCSS vs TailwindCSS, TailwindCSS tutorial, Program With erik, Program With Eric, Erik hanchett

Id: 1vwq4uaYQGU

Length: 12min 21sec (741 seconds)

Published: Mon Apr 03 2023