Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
2 replies
Bozhidar

Astro extension doesn't use `prettier-plugin-tailwindcss` when formatting

Ran into a weird issue when setting up automatic Tailwind class sorting inside a pnpm-based Astro project. I tried to resolve it, but I was unable to find a solution myself; could anyone point me in the right direction, please 🥺

I have prettier and prettier-plugin-tailwindcss installed as devDependencies:
{
  "devDependencies": {
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4"
  }
}


I am using prettier-plugin-{astro,tailwindcss} inside my prettier.config.cjs, configured as the docs (https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins) say:
{
  plugins: [
    require.resolve("prettier-plugin-astro"),
    require.resolve("prettier-plugin-tailwindcss"), // last
  ],
  pluginSearchDirs: false,
}


And formatting with Prettier CLI works:
$ pnpm exec prettier --write src/pages/foo.astro


However, when I format the code inside VSCode using the Astro extension, it only pretty prints the code, but doesn't sort Tailwind classes. I can't use the Prettier extension as a formatter, because it cannot format 'Astro'-files. This is a big annoyance, since I'm used to classes auto sorting on save, so it's painful having to run prettier in a terminal.
Is this a configuration problem, or is it an issue with the Astro extension?
GitHub
GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugi...
A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. - GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS tha...
GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugi...
Was this page helpful?