Meta tags:
description=People have been talking about the best way to sort your utility classes in Tailwind projects for at least four years. Today we’re excited to announce that you can finally stop worrying about it with the release of our official Prettier plugin for Tailwind CSS.;

Headings (most frequently used words):

tailwind, our, css, resources, plus, community, automatic, class, sorting, with, prettier, how, classes, are, sorted, customization, get, all, of, updates, directly, to, your, inbox, sign, up, for, newsletter,

Text of the page (most frequently used words):
the (33), div (22), class (18), classes (15), #tailwind (14), and (14), #prettier (14), plugin (11), that (11), your (10), with (10), grid (8), css (7), order (7), hover (7), any (6), cols (6), for (5), you (5), are (5), sorted (5), utilities (5), our (4), plugins (4), like (4), sort (4), shadow (4), scale (4), opacity (4), border (4), gray (4), text (4), 700 (4), button (4), sky (4), github (3), templates (3), plus (3), showcase (3), blog (3), documentation (3), get (3), just (3), will (3), end (3), sorting (3), about (3), using (3), them (3), together (3), same (3), this (3), layer (3), then (3), tailwindcss (3), works (3), discord (2), community (2), hero (2), patterns (2), heroicons (2), headless (2), refactoring (2), resources (2), kit (2), blocks (2), sponsor (2), playground (2), all (2), out (2), file (2), think (2), auto (2), have (2), fast (2), way (2), come (2), easy (2), when (2), comes (2), select2 (2), dropdown (2), custom (2), always (2), modifiers (2), grouped (2), which (2), 125 (2), 150 (2), after (2), flex (2), 300 (2), also (2), means (2), container (2), first (2), finally (2), can (2), install (2), white (2), 800 (2), reinink (2), automatic (2), trademark, policy, copyright, 2026, labs, inc, subscribe, updates, directly, inbox, sign, newsletter, ready, try, check, full, respect, work, installed, but, benefits, formatting, quickly, outweigh, stylistic, preferences, used, pretty, there, change, config, tried, really, hard, understand, communicates, most, important, information, possible, being, opinionated, offering, little, terms, customizability, day, biggest, benefit, one, less, thing, argue, team, gets, right, customization, don, from, targeting, third, party, library, front, see, element, responsive, they, configured, theme, smallest, largest, default, plain, focus, actual, different, loosely, based, box, model, tries, put, high, impact, affect, layout, beginning, decorative, while, trying, keep, related, themselves, well, override, other, appear, later, list, component, base, followed, components, its, core, does, organize, orders, how, load, flag, cli, option, api, add, configuration, npm, started, dev, dependency, seamlessly, configurations, because, anywhere, including, every, popular, editor, ide, course, command, line, before, scans, attributes, containing, sorts, those, automatically, following, recommended, people, been, talking, best, utility, projects, today, excited, announce, stop, worrying, release, official, least, four, years, adamwathan, adam, wathan, jonathan, january, 2022, partners, docs, ctrl,

Text of the page (random words):
automatic class sorting with prettier tailwind css v 4 3 k ctrl k docs blog showcase partners plus january 24 2022 automatic class sorting with prettier jonathan reinink reinink adam wathan adamwathan people have been talking about the best way to sort your utility classes in tailwind projects for at least four years today we re excited to announce that you can finally stop worrying about it with the release of our official prettier plugin for tailwind css this plugin scans your templates for class attributes containing tailwind css classes and then sorts those classes automatically following our recommended class order before button class text white px 4 sm px 8 py 2 sm py 3 bg sky 700 hover bg sky 800 button after button class bg sky 700 px 4 py 2 text white hover bg sky 800 sm px 8 sm py 3 button it works seamlessly with custom tailwind configurations and because it s just a prettier plugin it works anywhere prettier works including every popular editor and ide and of course on the command line to get started install prettier plugin tailwindcss as a dev dependency npm install d prettier prettier plugin tailwindcss then add the plugin to your prettier configuration file plugins prettier plugin tailwindcss you can also load the plugin by using the plugin flag with the prettier cli or by using the plugins option with the prettier api how classes are sorted at its core all this plugin does is organize your classes in the same order that tailwind orders them in your css this means that any classes in the base layer will be sorted first followed by classes in the components layer and then finally classes in the utilities layer container is a component so it comes first div class container mx auto px 6 div utilities themselves are sorted in the same order we sort them in the css as well which means that any classes that override other classes always appear later in the class list div class pt 2 p 4 div class p 4 pt 2 div div the actual order of the different utilities is loosely based on the box model and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end while also trying to keep related utilities together 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 div modifiers like hover and focus are grouped together 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 div responsive modifiers like md and lg are grouped together at the end in the same 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 div any custom classes that don t come from tailwind plugins like classes for targeting a third party library are always sorted to the front so it s easy to see when an element is using them div class p 3 shadow xl select2 dropdown div class select2 dropdown p 3 shadow xl div div customization we think prettier gets it right when it comes to being opinionated and offering little in terms of customizability at the end of the day the biggest benefit to sorting your classes is that it s just one less thing to argue with your team about we ve tried really hard to come up with a sort order that is easy to understand and communicates the most important information as fast as possible the plugin will respect your tailwind config js file and work with any tailwind plugins you ve installed but there is no way to change the sort order just like with prettier we think that the benefits of auto formatting will quickly outweigh any stylistic preferences you have and that you ll get used to it pretty fast ready to try it out check out the full documentation on github get all of our updates directly to your inbox sign up for our newsletter subscribe tailwind css documentation playground blog showcase sponsor resources refactoring ui headless ui heroicons hero patterns tailwind plus ui blocks templates ui kit community github discord x tailwind css documentation playground blog showcase sponsor tailwind plus ui blocks templates ui kit resources refactoring ui headless ui heroicons hero patterns community github discord x copyright 2026 tailwind labs inc trademark policy