Tailwind Classes Sorter
Sort tailwind classes in order of default plugins.
Go from this:
z-50 z-10 container text-left md:text-center justify-center
To this:
container justify-center text-left z-10 z-50 md:text-center
Example usage:
const twClassesSorter = const classes = 'z-50 z-10 container text-left md:text-center justify-center' const sortedClassList = twClassesSorter console// container justify-center text-left z-10 z-50 md:text-center
API
Constructor
constructoropts: : TWClassesSorter
Public Properties
pluginsOrder: stringclassesPosition: 'components-first' | 'components-last' | 'as-is'unknownClassesPosition: 'start' | 'end'
sortClassList
/** * Sorts an array of classes by Tailwind plugins. * @param classes List of classes to sort */sortClasslistclasses: string | string: string
Example
twClassesSorter.sortClassList 'z-50 z-10 container text-left md:text-center justify-center'// Result: ['container', 'justify-center', 'text-left', 'z-10', z-50', 'md:text-center']
setPluginOrder
/** * Changes the order classes are sorted by using Tailwind's plugins. * @param newPluginOrder New plugins order used for sorting classes */public setPluginOrder newPluginOrder: string | string: void
Example
twClassesSorter.setPluginsOrder
setConfig
/** * Changes the tailwind config. * @param config New config path or object (or null to try to find tailwind.config.js) */public setConfigconfig?: string | any: void
classesFromString
/** * Returns a class list array from a string of multiple classes. * @param classes String of classes * @static */static classesFromStringclasses: string: string
Example
TWClassesSorter.classesFromString'w-full absolute top-0'// Result: ['w-full', 'absolute', 'top-0']
You may be interested in this as a prettier plugin... https://github.com/Acidic9/prettier-plugin-tailwind-classes-sorter