WindiCSS-Is it a Tailwind CSS Killer? Review and Demo

[Music] [Applause] [Music] when it was released telling css was one of those frameworks that made everyone notice but popularity breeds competition and there's a new container that's been gaining ground called windy css let's take a look at why you would want to consider it and then we'll build something with it towing has a utility-based approach which is a bit controversial so you should definitely read this article by its creator to understand why he switched to this approach and why it might work for you with tailwind you use a number of classes to define your layout this is pretty close to using style attributes but it does place some constraints on that so it's a little bit more expressive as well as constrained this makes tailwind a really good solution for using with component based architectures like react and view compared to something like bootstrap tilland doesn't have any built-in components so things like modals popovers or toasts have to be built from scratch so stick with bootstrap if all you need is a way to build sites quickly so if tailwind css is so great why would you want to switch to something like windy css let me talk about these features and how they differ from tailwinds first notice that windy css is fully compatible with tailwind css v2 so if you're used to the classes that you use in tailwind this is going to be pretty familiar to you now on top of that they do have some additional features so we'll go through them and i'll show you that some of these are addressed in later versions of tailwind most of these come from the just-in-time version of tailwind css you can see that the just-in-time mode version of tailwind css is a lot like windy css but there are some differences now the first feature is value out of infer which is available in just in time mode on tailwind this is really powerful because it allows you to use arbitrary values in your classes and put in whatever values you want right here in brackets next up is variant groups now these allow you to group variants together with a parenthesis this isn't yet on tailwind css and it's a pretty powerful feature it lets you use a single hover variant and then in parentheses put all of the values that you want to modify next up is a feature called shortcuts this lets you take a number of different classes like you see right here and combine them into a name like btn that you can use in your html that makes it a lot easier to write repetitive content it always does let you do the same thing but it's a little bit harder to apply you create a layer targeting the components section of your code and then you can create any shortcut you want using the apply keyword the windy css approach seems a little bit easier and more direct to me it also supports css and js syntax if you're into that sort of thing there's also some improvements to responsive design you can add a prefix like md or lg to the utility just like you can with tailwind however you do have some options for custom ranges so you can have things like greater or equal to than this breakpoint smaller than this breakpoint or exactly this breakpoint range directly in your html you can also combine that with varying groups to make some really powerful media queries there's also dark mode that is something that tailwind offers however there is an rtl mode which is a right-to-left mode available to you if you're using a language that writes from the right side to the left side so that's pretty cool there's also an important prefix just like with tailwinds as well as directives which you can use in tailwind and you can still use these directly in your css so that's pretty useful there is something called attributify mode now this is pretty interesting you do have to turn it on because it is optional but once you turn it on you can use any of the properties as attributes in your code so you can say for example the bg is going to be this right here and that makes them easier to modify with code finally there is a visual analyzer which you can use in a couple of different ways it gives you some stats about what you're building to use it you can run an npx command like this or you can install it locally there's also a way to install it with the visual code extension which i think makes a lot more sense than the other methods finally another feature of windy css are the number of integrations that it comes with so it does offer a cli but it's pretty much there to just translate your code so it has no live reloading features if you want that you're going to need to use something like veet webpack or rollup and it does have integration with frameworks like vue.js as well as velt make sure you download the visual studio code extension if you want to have features like autocomplete syntax highlighting and others let's take a look at how we can install windy css you can use any of these build tools right here i'm going to use veet which is extremely fast and very popular right now these instructions show you how to install the windy css plugin for veet but not beat itself i'm going to open up my terminal i'll make sure that i'm on the desktop that's where i'll place all my files and i'm going to run the mpm init the latest command now this will fire up the cli for veet and it's going to ask you a series of questions i'm going to call my project wendy css and for frameworks i'll just choose vanilla javascript and i'll choose it again because i don't want to use typescript for this project and it installs and creates a project for you if we go to that project we can open this up in visual studio code all right so let's go ahead and install the uv plugin so for that i'm going to pull up the terminal in vs code and i'll run the npm i minus the plugin windy css and i'll also install windy css itself right here we'll need to add a config file for veet just go ahead and add this new file right here called veet.config.js and this will import our windy css library from our plugin we'll use export default and specify that for the plugins we want to use windy css now there's not going to be a configuration object right here so then we'll go ahead and close this import one more thing in our main.js file the default one that we get targets an app id right here we're not going to use any of that we're also not going to use the styles that are provided because we don't really need them so i'm just going to delete all this and select import virtual with the css which is how you start the library let's go ahead and run our live reload server for our project so i'm going to pull up a terminal and do the npm run dev command this will start up a server at localhost 3000 which i can open up in a browser now if you pull this up it'll be completely blank let's go ahead and put these side by side and if we go into our index html file we can get rid of this and we'll just type in a headline level one here and we'll do a paragraph here with some lorem ipsum you should see it come up and if you've installed this correctly none of the text should have any kind of format at all let's go ahead and add some additional files in here and clean up some of the other stuff so i've got a couple of files that i've created here for you this is just an images folder with this picture of an alien landscape and i've also got another html file that has some different text so i'm going to copy these into my windy css folder this will be the way the files look at the beginning of our project let's start working on how to make this look a little bit better using windy css the first thing you learned about wendy is that it is a complete clone of tailwind css so you can use the same classes that you're used to if you're coming from tailwind for this headline level one i'm going to add some classes here and i'll start with a text and then 6 xl class that's going to make the text a lot bigger and you'll notice that i do have autocomplete working that is because i have the extension installed for windy css so if you don't have that just click on the extensions bar and look for wendy css and make sure that you find this extension right here and that you install it let's go ahead and hide the sidebar as well as the activity bar just so that we have a little bit more room to work with now we can add some additional classes here for for the text i'm going to make it a gray color so that it's not completely black we'll set that to 800 we'll use the tracking type which is the spacing between letters and we'll use the font extra bold size which will make this really heavy this h level 2 will have some additional classes as well we'll use the pink 700 this is one of the advantages of tailwind css as well as windy it has a color palette that is a lot richer compared to something like bootstrap we'll add some additional classes for the paragraphs as well a bit of padding at the top we'll make sure it doesn't get any wider than a certain amount one of the big complaints with something like windy css and tailwinds is that on occasion these classes can get really large so you'll see that when i add the classes to the button right here but that was certainly a lot of classes just to get the look of that button and we're not even done yet because you can also do what's called a variant which means you can define how this is going to look when somebody rolls over the button in this case now there's a way to fix that and i'll show you how it works in just a minute let's go ahead and finish with some of the other code that we have here so we'll do some classes for the images as well the class called object cover means that we set the height of the image and then the contents will automatically fit in that space proportionally let's go ahead and work on the layout a little bit for this so i'm going to add another div right here to make sure that we have some classes available that will contain both the image and the content before the image right now so here we'll set this to a flex display and we'll add a width of full which means just make it the whole width of the items so we're going to put all of these things in here these should actually go outside of main and then we're going to grab the image and main and put them in here so we have two pieces of content that we want to insert inside this container and our main container is going to have some classes we're going to set the height of this to 100 percent of the height of the container and then also set this to flex and make sure that it is a column we'll align this text to the right and add a little bit of padding here and justify this to the center let's take a look you can see sort of the layout is coming together a little bit it's looking sort of nice now i'm going to modify my button so that it has an additional class here of self end this will make the button not be the entire width of the container here and i want to make sure that the second item this image right here grows and shrinks so i'm gonna add an additional div here and we'll give it a class of flex one so that class will allow this image or whatever is in here really to go ahead and grow and shrink and so now what will happen is uh this image will disappear until i go to a wider sort of space and it will appear depending on the width of the container which i think looks really nice it's a really nice responsive design layout that we got done with just a few classes and i think that you could really see the power of what something like tailwinds will do as well as of course windy css if you haven't seen tailwinds before this is probably driving you crazy the fact that you have to create so many different classes in order to make a simple button probably scares you because you think what if i have to make a lot of these buttons right so the nice thing about both tailwind and windy css is that you can abstract these into something called shortcuts now the way that you do this is actually a little bit different between windy css and tailwind with windy you have to create another file that's going to be called windy config.js and here we'll do the same thing that we do with most modules we'll do export default pass along an object and here you put in shortcuts now this is different than telling css and i think it's actually an improvement so here we can define a shortcut called button and paste whatever we want into the definition for that shortcut so i'm going to grab all the stuff from making the button i'm gonna leave margin top four because i want the button to automatically do everything other than set the margin so i'll just go ahead and use this button right here paste all the text for it now this is something that will probably require me to restart the server so let's go ahead and do that we'll restart it again and you can see that now this has been applied right here working with css is going to be so close to working with tailwind there are a few additional features so if we want to do a hover state with multiple variants one of the nice things is that you can put things in parentheses like this and it's a much better way to combine multiple variants normally you would have to put a hover colon for every one of these items which is sort of a pain when you use tailwind now both of them will have the ability to do value auto infer which is a really powerful feature it means that instead of specifying predefined values here so you can say here for example 6xl and that makes it this size and 7xl which makes it this size but if you wanted something in between with any of these values you could put things in brackets and then just specify the value yourself one big advantage in windy is that the responsive system is a little better so for example you can specify a breakpoint that is less than a certain amount so you could say at the less than md breakpoint then go ahead and use a different text size and it makes it a lot easier to design things if we make this 3m at the medium and smaller breakpoints then when we make this bigger it's going to make the text a little bit larger at the larger breakpoints and that's something that is a little bit easier than in tailwind so if you're using the just-in-time version of tailwind css then windy css is not going to be that much of an improvement version 3 of tailwind css is releasing soon so there's a couple of things in here that are a little bit better but not that much there's also though some intangibles it does feel a lot faster i haven't done any benchmarks but i can tell you it just feels like it updates a lot quicker and the integrations are very well done plus the website itself if you go to the documentation i think it's a little bit more concise you can still hit command k and find anything you want in the documentation and it takes you directly there i do wish the projects would merge but one of the difference in wendy is that it's written in typescript [Music]

Channel: Planet of the Web

Views: 1,720

Keywords:

Id: 3PSu4tGWeq8

Length: 16min 33sec (993 seconds)

Published: Fri Nov 26 2021