Class Sorting and Prettier Plugin
Install prettier-plugin-tailwindcss to automatically sort utility classes in a canonical order, improving readability and reducing merge conflicts.
Why Class Order Matters
When multiple Tailwind developers work on the same project, utility classes inevitably appear in different orders in different files. While class order rarely affects rendering, inconsistent ordering makes code reviews noisy and diff outputs hard to read. A consistent canonical order helps everyone understand component structure at a glance.
Introducing prettier-plugin-tailwindcss
prettier-plugin-tailwindcss is the official Tailwind CSS Prettier plugin maintained by the Tailwind team. It automatically sorts utility classes in your markup into a canonical order every time Prettier formats a file. No manual effort is needed — just save and the classes reorganize themselves.
npm install -D prettier prettier-plugin-tailwindcssAll lessons in this course
- Auditing Your CSS Output
- Class Sorting and Prettier Plugin
- Linting Tailwind With ESLint
- Team Conventions and Style Guide