Skip to content

support "classNames" object expression#126

Closed
kolesparks wants to merge 2 commits intotailwindlabs:mainfrom
RevLabs-LLC:main
Closed

support "classNames" object expression#126
kolesparks wants to merge 2 commits intotailwindlabs:mainfrom
RevLabs-LLC:main

Conversation

@kolesparks
Copy link
Copy Markdown

I'd like to be able to sort tailwind classes that are passed via an object expression to component libraries like React Mantine. I'm currently using a PNPM patch with this suggested change.

Example:

<TextInput
  label="Name"
  placeholder="Please enter name"
  classNames={{
    label: "block pb-2 text-sm font-semibold text-gray-400",
    icon: "pl-3 text-gray-400",
    input:
      "mt-1 h-12 w-full rounded-xl border-gray-300   pl-11 font-bold text-gray-600 placeholder:font-medium placeholder:text-gray-400 focus:border-gray-300 focus:outline focus:outline-blue-500 focus:drop-shadow-lg",
  }}
  icon={<IconUser />}
/>

@oHTGo
Copy link
Copy Markdown

oHTGo commented Apr 23, 2023

I think it is useful. Could you please merge it?

@thecrypticace
Copy link
Copy Markdown
Contributor

Hey, we've just merged #155 which provides a way for you to specify additional attributes, functions, and tagged template literals that should be sorted by the plugin. It's available via our insiders build and will be released in the next version of the plugin. We would like to get some feedback on this feature before we release it, so please give it a try and let us know what you think!

To test the new features you can install the insiders build like so:

npm install prettier-plugin-tailwindcss@insiders

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants