aacn / eslint-plugin-tailwind-classname-order Goto Github PK

When trying to order an object like this:
<button className={``rounded-full bg-white ${open ? 'absolute -top-3.5 -right-3.5' : null} ``} />

The sanitized version will look like this:
<button undefined className={``rounded-full bg-white ${open ? 'absolute -top-3.5 -right-3.5' : null} ``} />

This is caused by the empty part after the ${} variable section.

"via-green-200/25 to-yellow-300/10 h-6 flex flex-row px-1.5 -space-x-2 bg-slate-100/80 bg-gradient-to-r from-blue-300/10 backdrop-blur" should be formatted as "h-6 flex flex-row px-1.5 -space-x-2 bg-slate-100/80 bg-gradient-to-r from-blue-300/10 via-green-200/25 to-yellow-300/10 backdrop-blur"