tqwewe / prettier-plugin-tailwind

Sort tailwind classes in HTML with Prettier.

Home Page:https://www.npmjs.com/package/prettier-plugin-tailwind

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Apply tailwind sort order on variable strings

leroynas opened this issue · comments

I would like to be able to sort all the classes that are defined in a variable, this already works with autosuggest in the Visual Studio Code tailwind plugin. I think it would be very smart to use the exact same options for this as are available in the Visual Studio Code extension.

Example:

import React from 'react';

const className = {
  root: `last:border-0 border-l border-gray-200`,
};

const Component = ({ children }) => {
  return <div className={className.root}>{children}</div>;
};

export default Component;

As already stated above, for the Visual Studio Code tailwind extension, the autocomplete and autosuggestions work. So there is a decent way to figure out this pattern. I would recommend checking how it works in that plugin and copy it to this plugin.