PnP support for prettier-plugin-tailwindcss

[blaise2s]

I've been trying to configure prettier-plugin-tailwindcss to work with zero installs and am not having any success... I'd like to follow the recommended class order, and it's easy if the plugin does it for you working with prettier to format on save; or, with lint-staged and husky on commit. Though I am having no luck. Anyone else find a solution to this or is this something that will need SDK support in the .yarn/sdks folder?

[clemyan]

What have you tried? The only caveat is that you have to require.resolve the prettier plugins. Other than that it should work seamlessly.

1. yarn init
2. yarn add --dev prettier prettier-plugin-tailwindcss
3. Create prettier config

// .prettierrc.cjs
module.exports = {
  plugins: [require.resolve("prettier-plugin-tailwindcss")],
};

4. Create test file. Note the wrong class order.

// main.jsx
function MyButton({ children }) {
  return (
    <button className="bg-blue-500 rounded px-4 py-2 text-base text-white">
      {children}
    </button>
  );
}

5. yarn prettier ./main.jsx --write
6. See that the class order is fixed

If you are using the VSCode extension:

7. yarn dlx @yarnpkg/sdks vscode
8. Restart the extension host. Apparently there are some caching issues

Assuming you have configured prettier as your formatter you have Format(-on-save) now

[blaise2s]

I have tried a lot of things that were close to this, but not exactly this solution, and this does in fact work. Thanks, Clement!