Installation

npm i --save-dev prettier-plugin-astro prettier-plugin-tailwindcss

(or by running the equivalent command for the package manager of your choice).

My Prettier Config

.prettierrc.mjs

/** @type {import("prettier").Config} */
export default {
  useTabs: true,
  singleAttributePerLine: true,
  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro",
      },
    },
  ],
};

NOTE: The plugin order matters. Ensure that the prettier-plugin-tailwindcss is loaded after the prettier-plugin-astro.

VS Code Settings

"prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

Press Ctrl + Shift + P (Cmd + Shift + P on mac), and search for user settings, selecting Preferences: Open User Settings (JSON).