Automated Class Sorting with Prettier
Folks have been speaking about the easiest way to type your utility courses in Tailwind initiatives for at least four years. Right this moment we’re excited to announce that you could lastly cease worrying about it with the discharge of our official Prettier plugin for Tailwind CSS.
This plugin scans your templates for sophistication attributes containing Tailwind CSS courses, after which kinds these courses robotically following our recommended class order.
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>It really works seamlessly with customized Tailwind configurations, and since it’s only a Prettier plugin, it really works anyplace Prettier works — together with each standard editor and IDE, and naturally on the command line.
To get began, set up prettier-plugin-tailwindcss as a dev-dependency:
npm set up -D prettier prettier-plugin-tailwindcssThen add the plugin to your Prettier configuration file:
{
"plugins": ["prettier-plugin-tailwindcss"]
}You can even load the plugin by using the --plugin flag with the Prettier CLI, or by using the plugins option with the Prettier API.
At its core, all this plugin does is manage your courses in the identical order that Tailwind orders them in your CSS.
Which means any courses within the base layer will likely be sorted first, adopted by courses within the elements layer, after which lastly courses within the utilities layer.
<div class="container mx-auto px-6">
</div>Utilities themselves are sorted in the identical order we type them within the CSS as effectively, which signifies that any courses that override different courses at all times seem later within the class listing:
<div class="pt-2 p-4">
<div class="p-4 pt-2">
</div>
The precise order of the completely different utilities is loosely based mostly on the field mannequin, and tries to place excessive impression courses that have an effect on the structure initially and ornamental courses on the finish, whereas additionally making an attempt to maintain associated utilities collectively:
<div class="text-gray-700 shadow-md p-3 border-gray-300 ml-4 h-24 flex border-2">
<div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md">
</div>
Modifiers like hover: and focus: are grouped collectively and sorted after any plain utilities:
<div class="hover:opacity-75 opacity-50 hover:scale-150 scale-125">
<div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75">
</div>
Responsive modifiers like md: and lg: are grouped collectively on the finish in the identical order they’re configured in your theme — which is smallest to largest by default:
<div class="lg:grid-cols-4 grid sm:grid-cols-3 grid-cols-2">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
</div>
Any customized courses that don’t come from Tailwind plugins (like courses for concentrating on a third-party library) are at all times sorted to the entrance, so it’s straightforward to see when a component is utilizing them:
<div class="p-3 shadow-xl select2-dropdown">
<div class="select2-dropdown p-3 shadow-xl">
</div>
We predict Prettier gets it right in terms of being opinionated and providing little when it comes to customizability — on the finish of the day the most important profit to sorting your courses is that it’s only one much less factor to argue together with your workforce about.
We’ve tried actually arduous to provide you with a kind order that’s straightforward to know and communicates an important info as quick as potential.
The plugin will respect your tailwind.config.js file and work with any Tailwind plugins you’ve put in, however there isn’t a technique to change the kind order. Similar to with Prettier, we expect that the advantages of auto-formatting will rapidly outweigh any stylistic preferences you may have and that you just’ll get used to it fairly quick.
Able to strive it out? Check out the full documentation on GitHub →