It's Time To Talk About This Tailwind Plugin

yo so judging from npm downloads there's about 8 million people per week using Tailwind CSS and there's about 1.8 million so way less people using the tool I want to talk about in this video and dude I'm no math genius right but 8 million 1.8 million like that's not a lot and I'm guilty I knew about this to months ago but I didn't use it and now that I finally got started using it in my projects God damn dude it's pretty good they just published a super nice quality of life Improvement update on Twitter and I took that as the opportunity to finally talk about the tool cuz I think you're going to like it all right so here's the deal right prettier a super useful tool when it comes to code formatting does not care about your class names by default if I said hello world right here and then we did some formatting using prettier which is pre-installed and basically every project that you do well bam the class name did not actually change if there were like a lot of spaces here then the file itself would be formatted right these spaces but nothing inside of quotes like the class name for example and honestly that's cool because how should prettier know that this is something you want it to address and if you do want it well that's available as a plugin and this plugin is by no means a secret right the prettier plug-in tail when CSS but they just published a pretty nice new update and the setup is really easy to the degree that I just feel silly for not using it earlier we just install the package let's create a new file and that's going to be a prettier RC where we can basically Define some rules um that prettier appes throughout our project and Bam we just put the plugin right in here and that's it right if we now format this we can already see that the spaces are removed so not only does prettier now apply to the entire file right and it removes all the excess spaces and so on but it now also applies to the actual class name whatever is in quotes and by the way this removal of Extra Spaces is one of the new features they just introduced in the plugin that we're going to talk about in this video but arguably the coolest thing the plug-in does is automatically sort your class name right so let's say we had a padding of four and a padding top of two in this order what do we expect to happen when we format this file and to understand that it's really cool to understand how Tailwind sorting works by default because let's imagine we did not have any kind of class name in our project right what is the CSS that is generated by Tailwind we can very easily find out let's create a build a production version of our app right here let's navigate into the disc assets and there it is there is our generated CSS file where does this come from basically just from our main index. CSS where we include Tailwind right just with these three lines of cod what is actually generated under the hood in or build is this wow that looks really ugly you might say and hell yeah you're right this does look really ugly but once we format it all this does is basically reset a lot of the default browser Styles across different browsers as well um to meet the Tailwind standard so it just looks way better out of the box box and then all styles that are used in or project dynamically are put at the very very bottom right down here so there's about 300 lines of CSS cleanup generated by default in t when CSS and only the classes we actually use let's say text red 500 are then just in time jit compiled into this CSS file let's see what that looks like let's build this project this is going to you notice this is going to create a new CSS file to avoid caching right so it puts a little hash at the end here so we don't get any weird caching behavior and if we now go into this new CSS file until line 3033 everything is going to stay the exact same right it's the default tail one stuff but then we can see the text red 500 is generated so only the CSS that we actually use in our project is put into the CSS file and that's exactly the point so the order matter CSS is cascading it's literally in the name right so the order matters a lot and the order in which this plugin sorts or class name by default is in this order first the base Styles then the components and then the utilities so utilities would be for example a padding two a padding four and so on that is utilities and that's the order that our classes are styled so to answer the question from before if we had a padding of four and a padding top of two well the padding top of two overwrites the padding of four at least on the top right so if we format this we expect there we go I just formatted it but you can't tell because we expect nothing to change but if we put the padding top before the padding for then first we have the changing style and then the default style and that order goes against the Tailwind philosophy of how things should be ordered right so once affir it this bam you just saw it the order gets switched around so first the general Styles and then the kind of overriding styles or take this example we have a shadow of large and a margin left of Two and a flex what order should this class name be in in the Tailwind logic of this first we want to see immediately the stuff that actually changes the layout because while the shadow large might actually look good in app it doesn't actually affect the layout at all right so once we format this bam the margin left goes first because that has the largest effect on the layout then comes the flex cuz that determines how things are ordered and lastly the purely visual stuff that you know is not important for layout so it can go at the very last now what if we had a custom class name in here this is super important this is if you want to add custom backgrounds and so on these should always be at the first place cuzz they're unusual right these can really mess with your Styles and these should always be first so they're the easiest to see and I really agree with this philosophy I think it makes it so easy to retell when class names imagine it was like this on Hover we have a Tex red 500 and normally we have a text green of 500 does it really make sense to have the class names in this order where first we have the over riding style and then the default style I don't think so so pseudo selectors like hover or like focus and all the other ones that we have in tailent are always put at the very end what if we had a grid where on small devices we want to have grid calls of three but by default we're going to have grid calls of to should it be this way hell no right I think you get the idea you get the point right so the overriding the conditionals are always put at the very end so let's say this was our um Tailwind right let's see what is generated in our index. CSS at line 334 bam there we are that's exactly the same order interestingly enough that we have in for app. TSX right so this match we have the grid then the grid call to then the conditional same exact order as right here so it's very intuitive if you're familiar with CSS and its cascading Behavior how Tailwind classes should be sorted and this plugin it just does it for you oh by the way one thing I didn't mention in the video that's also new in the update right it's not only that now this removes the Extra Spaces in your class name which is by far the cooler part of the new update right but it also removes duplicate class name so if you have two BG red of 500s for example then you format the file you only have one is that a big deal no because the second time you mention that class name it would already be underlined like with a Squigly underline right so let me know what you think I've been totally sleeping on this tool and I wish I hadn't but uh it is what it is all right that's going to be it for this video I really hope you enjoyed and I'm going to see you in the next one until then have a good one and bye-bye [Music]

Channel: Josh tried coding

Views: 42,219

Keywords: tailwind, tailwindcss, typescript, react, tailwind css, update, josh tried coding, joshtriedcoding

Id: dQqe6x4MECg

Length: 7min 25sec (445 seconds)

Published: Sun Jun 02 2024