Tailwind formatter sorts classes according to recommended ordering (as it appears in CSS), without the aggressiveness of prettier. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.
- Customize class ordering with a
.tailwindorderfile - Publish the default recommended order via the dropdown menu
- Sort currently open file
- Sort all files project wide
Code -> Run Tailwind Formatter
Hotkey -> Shift + Ctrl + H
The default class order is available under src/resources/classes.txt. Custom classes will automatically be pushed to the back
of the class list. Duplicated classes will also be removed.
The order given is following the recommended standard, which is as they appear in the generated css.
Create a .tailwindorder configuration file in the root of your project that contains a list of classes as you wish them to appear. If you simply want to move a few, then I recommend publishing the default configuration first.
Example:
bg-red-500
p-4
h-15
mx-2
Due to size restrictions, please consult the plugins classes.txt for a full list of classes as generated by the Tailwind CLI.
Building updated classes is much more straight forward than painfully going through the docs. It's not elegant, but it works.
cd tailwind
npm install
# If you need to generate the default configuration again, Or consult the default stub https://unpkg.com/browse/[email protected]/stubs/defaultConfig.stub.js
npx tailwind init --full
# This generates a full classes.css file
npx tailwindcss build -o classes.css
# This parses it and extracts the necessary classes we need into classes.txt
node generate.js
# From there, copy paste classes.txt in resources to update internal listMIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent