The short version

Install Prettier with prettier-plugin-astro and prettier-plugin-tailwindcss, list both plugins explicitly in .prettierrc because Prettier 3 no longer discovers them automatically, and sort utility classes whenever you format a file.

Formatting is a solved problem if you configure it once. Prettier handles indentation, quotes, and line breaks across the codebase. With the right plugins, it also formats .astro files and sorts Tailwind classes. This guide gives you the minimum setup for an Astro project with Tailwind CSS and Prettier 3.

The integration needs two plugins and one configuration file. Prettier 3 stopped discovering plugins automatically, while the Tailwind plugin added support for Tailwind 4’s CSS-based configuration. Both changes affect the setup below.

Getting started

Make sure you have the following on your machine:

  • Node.js (the current LTS version)
  • Visual Studio Code with these extensions: astro-vscode, prettier-vscode, and tailwindcss-intellisense

Initial Astro project setup

If you do not have a project yet, create one:

bash
npm create astro@latest

Astro asks a few questions to customize the project. Choose the options that suit your needs; a minimal template with strict TypeScript is a sensible default.

Adding Tailwind CSS and Prettier

From within your new Astro project folder, run:

bash
npx astro add tailwind
npm install --save-dev prettier prettier-plugin-astro prettier-plugin-tailwindcss

The first command adds the Tailwind Vite plugin to astro.config.mjs, the recommended integration for Tailwind 4. The second installs Prettier with the plugins for .astro files and Tailwind class sorting. Accept the defaults when prompted.

Create src/styles/global.css with @import "tailwindcss"; if the command has not already created it. Import that stylesheet in your shared Astro layout frontmatter with import '../styles/global.css' (adjust the relative path). The Vite plugin alone does not apply styles to a page.

Configuring Prettier

Create a .prettierrc file in the root of your project:

json
{
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "printWidth": 100,
  "tailwindStylesheet": "./src/styles/global.css",
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
}

The plugins property is essential. Prettier 3 no longer discovers plugins implicitly, so without these entries .astro files remain unformatted and classes are not sorted. If you also use a component framework such as Svelte, add its plugin (prettier-plugin-svelte) to the same array. Put framework plugins first and the Tailwind plugin last.

Create a .prettierignore as well for files that should not be formatted:

node_modules/**
vercel.json

With Tailwind 4, tailwindStylesheet is required: point it at your actual CSS entry file, here src/styles/global.css. That is how the plugin learns your theme tokens and sorts custom classes correctly. To format on save in VS Code, enable Editor: Format On Save and select Prettier as the default formatter.

Conclusion

That is the complete setup: list both plugins in .prettierrc, add an ignore file, and run the same pinned Prettier version in the editor and CI. Your code then follows the same format on every machine, and code reviews can focus on the work rather than whitespace.

The full Astro setup guide covers the wider starter configuration, including Svelte, Vercel and TypeScript. If you would rather hand over the build, you can hire an Astro developer to handle the project setup and implementation.