[Prettier Plugin] sorting classes with prefix

[c4leweb]

Hello everyone,
I've been racking my brains for a few hours now and I can't find a solution.
I can make the plugin work with standard classes, but for my code I need to use a prefix to my classes.
tw-p- 4 for p-4 for example.
My tailwing.config.js file is configured as follows:

export default {
  content: [
    "./src/*.{js,jsx}",
    "./src/components/**/*.{js,jsx}",
    "./src/pages/**/*.{js,jsx}",
    "./src/hooks/**/*.{js,jsx}",
    "./src/utilitaires/**/*.{js,jsx}",
    "./index.html"
  ],
//   corePlugins: {
//     preflight: false,
//   },
  prefix: 'tw-',
  important: true,
  theme: {
    extend: { 
        screens: {
            'xs': '400px',
        }
    },
},
  plugins: [
    require ('@tailwindcss/forms'),
    require ('@tailwindcss/aspect-ratio')
  ],
}

My prettierrc file :

{
    "bracketSpacing": true,
    "semi": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "tailwindConfig": "./tailwind.config.js",
    "plugins": ["prettier-plugin-tailwindcss"]
}

I can't figure out how to configure the plugin to take this prefix into account.
Has anyone encountered this problem or has a solution?

Thank you very much for your help.

RQ: Of course I've tried to find a solution in the discussions without success, but maybe that's because English isn't my mother tongue.

[nosleepguy]

i have a same issue

[generalentropy]

I have the same problem, have you found a solution?

[markcarroll]

I am seeing the same thing. this appears to be a bug.

[generalentropy]

@markcarroll

I managed to make it work. First, ensure that tailwind.config.js appears first in your prettier.config.cjs file. Example :

module.exports = {
  tailwindConfig: "./tailwind.config.js",
  plugins: ["prettier-plugin-tailwindcss"],
};

Then, check that you don't have duplicate Prettier configuration files. And finally, make sure that Prettier is installed in your project.

[Tonio31]

Adding the tailwind config within prettier configuration did the trick for me as well

[Ev357]

yo, i had the same issue, but resolved it with adding this to the .prettierrc file

    "tailwindStylesheet": "./src/styles.css"

as stated in docs

maybe this will help someone

[kowackag]

@Ev357 Thank you very much. It works :)