CSS/Tailwind Order is a comprehensive VS Code extension designed to automatically sort and format your CSS declarations and Tailwind utility classes using the widely-adopted 9elements semantic methodology.
Keep your stylesheets and utility classes perfectly organized, readable, and consistent across your entire codebase with zero effort!
🚀 Features
🎨 Semantic CSS Sorting: Sorts standard CSS, SCSS, and LESS declarations logically instead of purely alphabetically.
💨 Tailwind CSS Support: Automatically sorts Tailwind utility classes in your HTML, JSX, TSX, Vue, Svelte, and PHP files.
✨ @apply Directive Sorting: Sorts Tailwind classes inside @apply statements in your stylesheets.
🔄 Format On Save: Automatically sort your styles when saving a file (configurable).
⚙️ Highly Customizable: Retain custom properties (--var) at the top, push unknown properties to the bottom, and more.
💻 Commands
Access these commands through the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
CSS/Tailwind Order: Sort Everything in Document: Sorts both CSS declarations and Tailwind classes everywhere in the current file.
CSS/Tailwind Order: Sort CSS Declarations in Document: Sorts only CSS rules in the document.
CSS/Tailwind Order: Sort CSS Declarations in Selection: Sorts only the highlighted CSS rules.
CSS/Tailwind Order: Sort Tailwind Classes in Document: Sorts all Tailwind classes in the current markup document.
CSS/Tailwind Order: Sort Tailwind Classes in Selection: Sorts only the highlighted Tailwind classes.
CSS/Tailwind Order: Sort @apply Directives: Focuses strictly on sorting @apply lists in CSS/SCSS/LESS.
⚙️ Configuration Properties
You can customize the extension via your settings.json:
Setting
Default
Description
cssOrder.sortOnSave
true
Sort CSS declarations and Tailwind classes automatically on file save.
cssOrder.placeUnknownPropertiesLast
true
Place unrecognized CSS properties at the end of the block.
cssOrder.keepCustomPropertiesAtTop
true
Keep CSS custom properties (--variable) at the top of declaration blocks.
cssOrder.preserveDuplicates
true
Preserve relative order of duplicate property declarations.
