I installed a prettier plugin for tailwind which works fine when sorting class names inside className attribute. However, it does not sort class names inside a variable like const className = 'pt-1 p-3'.
Is there anything I could do to make the sorting possible?
It looks like the plugin is only looking for the class and className JSX attributes for the string of utility-classes to sort. You can see that here in the plugin code:
function transformJavaScript(ast, { env }) {
visit(ast, {
JSXAttribute(node) {
if (!node.value) {
return
}
if (['class', 'className'].includes(node.name.name)) {
...
https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/src/index.js#L318
not allowed to fixed it in a constant ; because it is an attribut standard of the JSX. try to restract a class for it and thanks
I don't think there's currently a way to do this with the prettier-plugin-tailwindcss. However, if you're open to close alternatives, there's the vscode plugin Headwind.
Unfortunately, Headwind only runs on save or keybind (it's not integrated into the Prettier process for CI/CD, automation), and you must be using vscode for development. But if that fits your use case, you can use regexes to customize where in your source code Headwind runs. Instructions are here.