Plugin classnames not recognised by Tailwind VSCode plugin or Prettier plugin following v1 update

[philwolstenholme]

Hi,

I recently updated to v1 and since then the Tailwind Prettier plugin no longer recognises the utility classes provided by this plugin. It moves the classes to the front of the class/classNames attribute, as it it was a custom class.

E.g. aisles-list styled-scrollbars pointer-events-auto -ml-5 mt-2 w-auto overflow-x-hidden overflow-y-scroll overscroll-y-contain rounded border border-grey-200 bg-white shadow-lg content-visibility-auto becomes aisles-list styled-scrollbars content-visibility-auto pointer-events-auto -ml-5 mt-2 w-auto overflow-x-hidden overflow-y-scroll overscroll-y-contain rounded border border-grey-200 bg-white shadow-lg when formatted.

There is also no Intellisense preview of the generated CSS when hovering over the classname.

Not sure if you're seeing this in your own usage?

My Tailwind config looks like this:

module.exports = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    // standard stuff…
  },
  plugins: [
    require("tailwindcss-hocus"),
    require("tailwindcss-animate"),
    require("@tailwindcss/typography"),
    require("tailwindcss-content-visibility"),
  ],
  future: {
    hoverOnlyWhenSupported: true,
    disableColorOpacityUtilitiesByDefault: true,
  },
  experimental: {
    optimizeUniversalDefaults: true,
  },
  important: false,
};

I've reinstalled the package (^1.0.0) a few times but it's not helped. I can replicate the issue with Prettier inside VSCode and also the Prettier CLI ran in a console.

[Cherry]

Sorry for the delay!

I don't use Prettier so haven't ever tested with it directly, but I can confirm I do get intellisense with VSCode:

For ordering classnames, we use eslint-plugin-tailwindcss and with our config the order of aisles-list styled-scrollbars pointer-events-auto -ml-5 mt-2 w-auto overflow-x-hidden overflow-y-scroll overscroll-y-contain rounded border border-grey-200 bg-white shadow-lg content-visibility-auto isn't changed, which is what I'd expect. If I move content-visibility-auto to the start manually, it gets auto-fixed back to the end for me.

I did change up how the plugin is built and packaged with 1.0.0 (moving to typescript, different test suite, etc.) but these shouldn't have had any impact on functionality.

Are there any debug logs from prettier or this prettier plugin that might yield further insights here?