Tailwind Is A CSS Framework Generator

hey friends what's up today I want to talk about how you can combine tailwind and regular CSS to create chadwi and this is just something I made up but this is how I recently been enjoying using Tailwind people are always on the Polar Opposites they either passionately hate Tailwind or they love it let me just tell you as someone I really don't care or Advocate that much for Tailwind I just love to use things that make my life easier so I'm not really dogmatic about these things and there's things in tailwind and regular CSS that annoy me to be honest and I'm actually going to talk a bit about that and how I combined tailwind and CSS to get the best of both worlds or friend in the past I would say something like I'm the weird person that enjoys both tawin and regular CSS but there's actually nothing weird about seeing the strength and weaknesses of both right and I love telling for a lot of things for example the first class editor support you get autoc completion and your editor for utilities and Etc which is really beautiful and CSS tooling absolutely sucks no I'm not talking about the developer tools which are aw awesome I'm talking about your editor for example you can have classes and other things that you make your own custom utility let's say if you're not using tell but your editor has no idea about those things yeah maybe you can get some weird extension maybe it works maybe it doesn't but actually CSS tooling is surprisingly bad one thing I don't love about tailing is arbitrary values and this is one of the best and worst features they added to TA in my opinion why is it best because it's super convenient you have some random value you can do it but TN is just trying to do too much in my opinion or people use Tailwind uh the tool is not at blame here right so people are trying to recreate every possible thing that exists in CSS in Tailwind God forbid to use a style or Etc you can use both right this is something that people ignore in this discussion Tailwind is just CSS they pretend or they don't know these tools they're using how they work right so think okay I can just use Tailwind I can't write a single line of regular CSS in my life ever again so arbitrary values are something that make Tailwind way worse in my opinion even though the Tailwind purist of course love it and before you typee comment about using apply and Etc you should read a documentation first because since day one this is discourage apply is just an escape hatch so you can use design tokens in regular CSS and it even said in dog whatever you do don't use apply just to make things look cleaner yes HTML templates literally tailing glasses are kind of ugly making changes in a project that has tons of custom CSS is worse and I kind of agree with this statement so you shouldn't just use this to abstract things right and even the author of ta tweeted this out years ago confession the apply feature int basically only exists to trick people who are put off by long list of classes into trying the framework and the way I look at tnd is actually like this tool that can generate a CSS framework for you and I'm actually going to show you what I mean by that because we can take something like open props we can plug this into tail without a problem we don't have to use their design system their design tokens and of course there are some other tools like Uno CSS and Etc but I think a majority of those tools I don't like them they kind of again do to too much and they also miss the point of Tailwind being limited when you're designing a site is great because you're not going to make something that looks like crap all right so let's look at some code all right friends so here I have a simple example I took from Adam Argy who's the creator of open props incidentally so here I have this schem switcher everything looks beautifully and just works right so we can toggle these themes and that's it and one of the things that annoy me with Tailwind also is using CSS variables you can do that but it wasn't that easy but thankfully Tailwind 4.0 completely Embraces this and it's in Alpha right now which I'm using so this is really awesome because now tailn I think is just a v plugin so you don't need post CSS you don't need a Tailwind config file you just do import tailin CSS of course you need to install the package and then this is now first class so let me just find the example and this works so great with the approach I've been exploring so you can just import elenes and now we have this layer tee so now you can specify things using regular CSS variabl so now if you specify a color here it's going to generate all of these variants for your color background focus and Etc using regular CSS variables this is absolutely amazing so you can see here how we generated this text neon and Etc this font family you can read more about this I'm going to link all of these things in the description if you want to read about it and this is in Alpha so be careful uh not everything works of course and there's really they tell you how you can try it out let me just if I scroll down to it okay they show you how you can do that they use post CSS eone so now you can see trying the alpha you can see now Tailwind is just a CSS or V plugin so now you can include it like this that's it now we just import it you can use post CSS like that and yeah that's basically it and also if you're using the Tailwind in Tais sense extension in vs code go to that extension paint and just switch to the pre-release version so things work as expected if you're going to use tailing that is right all right friends so let's look at the code again I just took this simple example from Adam argil and this method works better in single file components but if you're using a react or something you can make work but I'm going to show you why it's more awesome in single file components so I'm just using swell 5 here I just have the steams option and I'm using a rune here and I'm just going to update the color scheme so let me just show you this example if we open the developer tools you can see color scheme Auto and then when we change the theme it's just going to change it here that's basically it we're just using CSS variables nothing complicated right and that's something I didn't like about telling before it's still the same I guess but in tailin dark mode it works really the opposite I actually want to start in dark mode and not go from light mode to dark mode and I just want to use CSS variables and do it however I want that's basically the whole premise of this video you can do whatever you want so we're going to use that and let me just show you what I use Tailwind for so I just use Tailwind for these things that are actually always annoying to type out so how many times have you specified display grid margin ping Etc this is something that tail is great at and it doesn't liter your markdown that much and of course you can say oh now I have to look at two places for my CSS but you don't really have to like unless you're like working with with a lot of people maybe this approach doesn't work but let me tell you uh working on these styles by myself I actually have a blast I'm so fast and productive doing this and I don't have to abuse tailn to try to use every possible feature of CSS so we're just looping over this well it's really not that Deport you can see I'm not using anything that advanced here when something is starting to get a bit complicated I just say Okay stop Tailwind here let's just go to the Styles this is just an example maybe I wouldn't use this exactly there's a lot of arguments from people they want to use some G template areas for example from CSS G like oh you can do this in telin and I'm like brother in Christ just use CSS this is the dumbest complaint I've ever heard please just use CSS if you don't have it like I don't want to advocate for telling but when people say something the void of logic I just can't believe it just use CSS imagine that this is great template area okay now I don't need to use taing for all of this junk let me just create this simple class in my single file component so now this is scoped to this component how beautiful is that you don't even have to worry about naming or whatever you can directly Target a p class or whatever and then I have this Swatch thing here as you can see here you can do whatever you want so now we can take advantage of CSS variables and let me actually show you why I love using tailing for this you probably also have an argument so people well I can make my own utility classes yeah yeah you can and then when when is enough enough then you start to make a verse version so for example here we can go to the Styles let me just find a spot here and then maybe you're not using tail you can say for example Center and this is a great thing when you're creating your utility class you for example say display grid right and place content Center so we can just say Place content Center and that's basically it so now we have this awesome but here's my problem when you're using CSS your tooling absolutely sucks for example if you have even 10 classes 20 classes you have to remember how this thing is named right and even if you save this for example and then you go back to your markup and you're like oh this is great I don't need tail wi H Fail Win smell wi it's it sucks right and then you're like oh what was the name of the thing I can was it Center was it grid Center or whatever and now when are you going where are you going to put this like in the docks or whatever why do you need docks for this when the awesome first class editor support from tailing this here right that's why I absolutely love telling for these things because you can just start typing things and it can absolutely rip for example you say BG and then you get all of the other completions so blend these colors and these colors aren't even from tail I override this with open props so let me show you how that works so let me just save this and I'm going to just remove this class so you're going to see this is something you can also do in Tailwind 3E but it's a bit harder and let me show you how simple it is right here so here we have this import Tailwind that's it and then you have this steam here so now you can say this color Aster this means that to remove all the other colors that taing has and you can also strip the default theme I think it's in their docs you can read about it but I just added these props from open props right so now I'm using Tailwind just as a tool to create a CSS framework and I'm going to get all of this awesome tooling and completion in my editor this is why it's so pointless to be dogmatic about things you're never going to learn about other more interesting things even if you hate Tailwind after this it's fine that's perfectly fine with me because I don't care but I actually want you to see these things and not just listen to random people who just hate things because they hate on them okay so let me just show you so I have colors here and I've done the same for the spacing so I Define all of my custom things here I'm just using CSS variables how beautiful this and Itali compiler is going to pick this up and it's going to create all of the necessary variants for this and here I just created these two for the phones because it couldn't be asked to be honest I just quickly put this demo together right and here have some radios and that's basically it so now using Adam AR's demo which he made for open props I can just redeclare this brand text light and Etc values here and now I can use CSS variables again here at the root here we're defining some things again it's really Buton and then we can use the media prefers color schem dark great now we're just going to use the CSS variables we didn't have to complicate our markup with things we don't care about of course you do you you're going to find a way that you enjoy of course and now we can Target color scheme light color scheme dark we just need to flip the CSS variables and that's basically it how beautiful is this friends right and let me just show you another thing so you can see how we have these surfaces here light dark and this is really cool you can make your own custom utility classes for this elev ation on your side so you can have elevation 1 2 3 4 and Etc and now you no longer need to think about now you can create some helpful utility classes right so we can go here I have one for example brand I have surface one so we can just slap surface one two three or four on the elevation that you want right and this is going to take care of all of these things for you so now we make our lives so much simpler and then I have some other things here and another thing I couldn't make work right now because it's in Alpha so for example you could have done something before in tailing free and Etc layer utilities or components and Etc and then when you would put your classes inside of here you will get also great Auto completion in your editor this is something I don't think is supported yet in telin Alpha but it's going to be and again your first class tooling editor support is going to be amazing right so now when I close this let me just show you this so when I go here to the code we can see here again our code isn't cluttered we're just using the same things that we're writing all of the time right and let me just find this here where my swatches are you can see I'm just mixing like this is why taing is so great because this first class editor support you can start typing Shadow you can get all the things here as you can see all of the utilities are generated for our colors like this choco color this isn't a tailing color this is an open props color but you can add your own design tokens and Etc and we can also enhance this by using regular CSS so we're saying here surface one Surface 2 surface 3 and surface 4 for elevation and we have everything set up beautifully using CSS and now if I save it and we can go here we can just switch this super easy peasy squeezy lemon squeezy like that boys how beautiful is this right all right friends that's it this was a shorter video but I hope you took something from it and if you still passionately hate Tailwind then that's perfectly fine and if you like what You' seen don't forget to like And subscribe and you can also support me by becoming a patreon thank you for watching and catch you in the next one peace

Channel: Joy of Code

Views: 31,250

Keywords: tailwindcss

Id: uxiqlwtEQx0

Length: 12min 28sec (748 seconds)

Published: Fri Mar 08 2024