Skip to content

unsorted-tailwind-classes

Added in 1.0.0 · Related issues · View source

Fix is always available.

What it does

Checks for class attributes whose Tailwind CSS utility classes are not in the canonical order produced by the Tailwind class sorter.

Why is this bad?

Tailwind recommends a single, deterministic class order so the same set of utilities always appears the same way in the source. Sorting them automatically removes the effort of arranging classes by hand and keeps diffs focused on real changes instead of reordering churn.

The fix also removes duplicate classes.

Example

<button class="sm:py-3 text-white px-4 py-2 bg-sky-700 hover:bg-sky-800 sm:px-8">...</button>

Use instead: 

<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

Options

References