tailwind-raw-reorder icon indicating copy to clipboard operation
tailwind-raw-reorder copied to clipboard

It is considering Tailwind Classes as custom classes

Open fclaussen opened this issue 1 year ago • 3 comments

First of all, thank you very much for this plugin. I'm dropping the prettier plugin in favor of this for my entire team.

Describe the bug

The projects I work on usually define or extend the color palette in the tailwind.config.js. You could have a color called primary that generates bg-primary for example.

Those classes are being treated as custom and being moved to the beginning next to the actual custom ones. In the example below I added a bg-red-100 and a text-secondary as well as a real custom class and you will notice that the text-secondary is now the first one, behind the custom class.

To Reproduce

  1. Customize your color palette in the TailwindCSS config file
  2. Try to use your color class
  3. See error
  4. Double-check your compiled CSS file for order
  5. Confirm error

Expected behavior

I would expect it to know that it is a color class and move it next to the bg-red-100. I also checked my compiled CSS file and the bg-red-100 was on line 516 and text-secondary was on line 527 so in theory, they should go together.

Screenshots

image Screenshot 2024-01-24 at 5 47 38 PM

Desktop:

  • OS: iOS
  • VSCode version: 1.85.2
  • TW Version: 3.4.1

fclaussen avatar Jan 24 '24 22:01 fclaussen

@fclaussen Thank you for submitting this. I can't seem to replicate locally, I get the proper reordering when following your reproduction steps. Would it be possible for you to create a small workspace where you still see the issue that you can submit? Another thing that might be at play is other tailwind plugins you have installed.

I want to make sure this is no longer an issue for you or your team, I just need some additional detail to determine the cause of the discrepancy.

Trapfether avatar Jan 25 '24 03:01 Trapfether

Hi @Trapfether Absolutely, what would be the best way of sending you this? What files are you looking for?

fclaussen avatar Jan 25 '24 16:01 fclaussen

You can make a small zip file and include it as an attachment to a comment, alternatively a small repo is always acceptable. I would be looking for the general structure of the workspace where the issue is occuring and the an example file where the issue is present. Once that is provided, I can narrow down where the issue is coming from.

I also pushed an update this morning that allows for specifying a custom location for the tailwind.config.js file. (I forgot to ask you where your config file was relative to the impacted file). So if your config file is not at the base workspace directory, you can override this setting to point to your desired location.

Trapfether avatar Feb 02 '24 19:02 Trapfether