Sorting Tailwind CSS Classes Automatically with Prettier

when it comes to deciding in which order to sort your talon utility classes in a project you may have had these sort of discussions with your team or within yourself i think we should sort them by alphabetical order how about colors first and then well actually wait listen all right let's schedule a meeting oh come on can we just let the computer decide [Music] in this video we take a look at the new prettier plugin for talon css and how it makes those sometimes difficult decisions for you one less thing to worry about for you and your team [Music] assuming you may not be familiar with prettier we'll do the setup from scratch together if you're already using prettier you only have to really install the plugin to get started prettier is an opinionated code formatter that will make sure that every file in the project is formatted the same way it only has a few options by design since the whole idea is to stop debating and let the tool make the decisions for you prettier works with a lot of languages and is supported in a lot of editors and ides and everywhere prettier works the tailwind css plugin will work as well in this video i'm using vs code but you'll be able to do a similar setup in many other editors okay so i'll take a super simple project that uses tailwind and i'll show you how to set everything up let's install prettier as a dev dependency all right so we've got prettier installed and in the root of our project i'm going to create a new file called dot prettier rc.json and this gives you a way to pass options if you need but it also indicates that the project is using prettier there's multiple ways to run prettier and i'll start by showing you how to do it with the command line so i want to run npx prettier and i want to do a simple check so i'll use the dash dash check flag and i want to check the index.html file alright so let's run this check and looks like everything's formatted properly let me change that so i will go in here and mess up the indentation and maybe let's take the href tag and put it down here and i will run the same check once again all right so now you can see that we have a code style issue found in the index.html file the check only checks for issues it doesn't replace the file if you want to replace the file and overwrite it you can do so with the dash dash write flag and once again index.html and that's just for this file but i could do src for everything inside an src folder if i had one or i can do period which is the entire project so this time when i run this command it will rewrite the html file with the proper formatting and here we go that's one way of running prettier and you can use that to set up a formatting step before you commit some code in what's called a pre-commit hook but what i prefer to do is to format every time i save a file i'll show you now how to set up prettier to format on save what i'm going to show you now is specific to vs codes but you'll be able to do something similar in your editor of choice the first thing i'll do is open the extensions panel here and search for an extension called prettier so i already have it installed on my computer but this is what you want to install to use prettier on vs code then in my vs code settings i will search for format and you can see our default formatter is set to use prettier which is good and then here we have this format on save option which is checked in so in case this checkbox is not checked you want to check that to format and save okay let's try this out i will intentionally mess up my file with some weird indentation and some line breaks and spaces like that and when i press save boom everything falls into place perfectly great we all set on the prettier side of things and it's time to bring along the tailwind css plugin [Music] i'll add it to my dev dependencies npm install dash d prettier plug-in tailwind css okay so now we have both prettier itself and prettier plug-in telling css in our dev dependencies and it's important that they are in the same node modules folder for things to work properly this plugin follows prettier's auto loading convention so as long as you've got prettier setup in your project it'll start working automatically as soon as you install it okay we're back in our html file and i'll collapse the head tag so we have a minimal setup and let's try out the tailwind css plugin so the surface area that this plugin covers is scoped to the class attributes in your templates and this is where it's going to look for telling classes and sort them out let me just paste a few tailwind utilities and watch what happens to this list of classes when i save my file three two one we can see that the plugin is working because our telling classes have been sorted for us automatically so what's the reasoning and mechanism behind this specific sorting order let's talk about that [Music] at its core all this plugin does is sort your classes in the same way that tellwind sorts them in your css classes in the base layer will be sorted first followed by the classes in the components layer and finally the classes in the utilities layer i'll make an example with px4 mx auto and the container class so the container class comes from the components layer whereas the other two classes come from the utilities so when i save the container class should jump first and here we go same deal within the utilities layer classes will always be sorted in a way that mirrors the source order in the css output we have an all-around padding utility here and then a padding top utility and the padding top is meant to override the global padding utility and therefore in the css outputs pt-2 comes after p 4 so when i save it will switch the order something very important to note changing the order of the classes in your html doesn't affect the generated styles in any way it's the source order of the generated css that matters not the order in which the classes appear in your html in other words this class sorting thing is not here to avoid bugs and issues but purely for organization and consistency reasons in general the order in which the different utility classes are sorted tries to put the high impact classes first it then pushes the decorative low impact classes at the end the approach is also loosely based on the box model starting from the outside in let's take a look at this example i have margin utilities border utilities padding utilities and i will now save this file to sort the classes and you can see the margin utility affecting the outside is placed first then we have utilities that affect the layout like display flex and height then we have the border utilities and you can see the border color although a decoration is grouped with the border width because it makes sense then we have the padding and then we have the decorative low impact classes so to speak like text gray and shadow the plugin will group modifiers and place them after the plane utilities the first class here is a hover modifier and there's another one here and when i save the modifiers have been placed at the end of the list same deal with responsive modifiers they will be grouped together and then placed at the end of the list in the order of the breakpoints in your theme and we have the plane utilities first followed by the small breakpoint utilities grouped together and then the large breakpoint at the end [Music] if i keep a previous example and add a class that does not come from tailwind like my custom class and this is not something you generate with tailwind but a class that targets let's say a third party library the plugin will place those classes right at the start of the list so it's clear what element uses them so let me save and there it is right at the start that's the prettier plugin for telling css in a nutshell by design there is no way to customize the sort order the plugin has strongly held opinions on that after all the biggest benefit of using this plugin is to make these decisions for you so you can stop debating and arguing with your team i thought it would be interesting to show you how to add the prettier plugin to an existing tailwind css project to get a real life example of what the process looks like okay so this is an existing next.js project it has a couple of pages a couple of components and this is a perfect candidate to try and add the prettier plugin for telling css if i look in the package.json file you can see we already using prettier in this project and so all i need to add is the tailwind css plugin npm install d pre-tier plug-in tailwind css okay so with the plugin installed let's try to format our homepage here three two one and there were definitely a few classes jumping around okay our class name attributes have been modified you can see on the h1 we had text for excel and then small and medium text changes and here they've been placed right at the end because the responsive modifiers come at the end and if i scroll there's a few more changes on this file okay i'm happy with that and i think i want to format all the templates on this project if your project is very large doing this manually could take a lot of time but fortunately with prettier we can bulk format all the files in our project at once so let's try that if i run a quick check you can see we have three files that need formatting and they all happen to be in the src folder so i will run npx prettier and this time we will write the files that needs to be updated in the src directory and you can see in white the three files that have been updated and just like that our project is now completely formatted with the class sorting treatments all we really had to do is install the plugin and run prettier through the files and now class sorting is something i'll never have to worry about again for this project sweet and that about wraps it up for this video thank you so much for watching go let your team know that there's one less thing to worry about in your codebase and i'll see you again soon [Music]

Channel: Tailwind Labs

Views: 86,077

Keywords:

Id: _CntOc4hBcg

Length: 9min 59sec (599 seconds)

Published: Fri Feb 04 2022