Integrate Prettier with Astro and Tailwind CSS

Prettier handles indentation, quotes, and line breaks. With the right plugins, it also formats .astro files and sorts Tailwind utility classes. This guide sets up both for an Astro project using Prettier 3 and Tailwind CSS 4.

There are two details to get right: Prettier 3 requires explicit plugin loading, and the Tailwind plugin needs the CSS entry point for your Tailwind 4 configuration.

Getting started

Use a current Node.js LTS release supported by your Astro version, with npm installed. If you use VS Code, install these extensions:

• Astro (astro-build.astro-vscode)
• Prettier (esbenp.prettier-vscode)
• Optional: Tailwind CSS IntelliSense for class suggestions; it is not required for formatting.

If you do not have an Astro project yet, create one:

npm create astro@latest

Choose a starter template and install its dependencies when prompted. Run the remaining commands from the project folder created by the wizard. This guide assumes Astro 5.2 or newer, where astro add tailwind installs the Tailwind 4 Vite plugin.

Adding Tailwind CSS and Prettier

If Tailwind 4 is not already configured, run:

npx astro add tailwind

Review and accept the proposed changes. The command adds @tailwindcss/vite to astro.config.mjs and creates src/styles/global.css with the Tailwind import:

@import 'tailwindcss';

Import that stylesheet in the front matter of a shared layout, such as src/layouts/Layout.astro, or in each page that needs it:

---
import '../styles/global.css'
---

Merge the import into your existing front matter; keep the rest of the layout. The CSS must be imported by a layout or page you actually render. See Astro's Tailwind setup instructions if your project uses a different structure. Existing Tailwind 3 projects should follow the migration instructions there first.

Then install Prettier and both formatting plugins:

npm install --save-dev --save-exact prettier@3 prettier-plugin-astro prettier-plugin-tailwindcss

--save-exact saves exact versions in package.json. Commit package-lock.json as well so teammates and CI can install the same dependency tree with npm ci.

Configuring Prettier

Create .prettierrc in the project root, or merge these settings into your existing Prettier configuration:

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

The first five options are formatting preferences, not Astro requirements. Adjust them to your team's conventions.

The plugins array explicitly loads the plugins. Prettier 3 removed automatic plugin discovery; installing a package alone does not load it in the CLI. The Astro parser override follows the Astro plugin's recommended configuration.

For Tailwind 4, tailwindStylesheet is required by the Tailwind plugin's setup instructions. Point it to your actual CSS entry point containing the Tailwind import and your theme or custom utility definitions. The path is relative to .prettierrc, not the file being formatted.

Keep prettier-plugin-tailwindcss last in the plugin array. If your project also uses Svelte, install its formatter:

npm install --save-dev --save-exact prettier-plugin-svelte

Then replace the plugins array with this one, keeping the other settings:

["prettier-plugin-astro", "prettier-plugin-svelte", "prettier-plugin-tailwindcss"]

Add .prettierignore for generated output:

dist/
.astro/
.vercel/

Prettier already ignores node_modules by default. There is no general reason to exclude vercel.json; it is a source configuration file that Prettier can format.

Formatting on save in VS Code

Merge these settings into .vscode/settings.json:

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

The Astro extension has its own formatter; these settings explicitly select the Prettier extension for .astro files. The Prettier extension uses your project's locally installed Prettier. Open a trusted workspace and approve local module loading if prompted.

For Svelte projects, also add "**/*.svelte" to prettier.documentSelectors and a [svelte] setting with the same editor.defaultFormatter value.

Checking the setup locally and in CI

Format the project, then check it without making changes:

npx prettier . --write
npx prettier . --check

Review the formatting diff before committing. --check exits with a nonzero status if files need formatting, so it can fail a CI job. In CI, install the committed dependencies with npm ci before running npx prettier . --check.

If formatting fails, check that the stylesheet path exists, the Astro parser override is present, and the Tailwind plugin is last. If the CLI works but saving in VS Code does not, check the selected formatter and the Prettier output panel.

Conclusion

The project now has an explicit plugin configuration, a Tailwind 4 stylesheet reference, and a formatting check you can use outside the editor. Keep the configuration and lockfile in Git so format-on-save and CI use the same rules.

The full Astro setup guide covers the wider starter configuration, including Svelte, Vercel, and TypeScript.

Originally published on straffesites.com.