Integrate Prettier with Astro and Tailwind CSS

Integrate Prettier with Astro and Tailwind CSS

Seppe Gadeyne

Freelance web developer

In this recipe, I'll walk you through integrating Prettier with Astro and Tailwind CSS. Follow along as we dive into the step-by-step guide, and in no time, you'll have a beautifully formatted codebase that looks great and boosts your productivity. Let's get started!

Integrate Prettier with Astro and Tailwind CSS
Integrate Prettier with Astro and Tailwind CSS


  1. Getting started

  2. Initial Astro Project Setup

  3. Adding Tailwind CSS and Prettier

  4. Configuring Prettier

  5. Conclusion

Getting started

Before you can begin, ensure that you have the following prerequisites installed on your system:

Initial Astro project setup

To kick things off, we'll create a new Astro project using the following command:

npm create astro@latest

Astro will ask you a few questions to customize your project. So go ahead and choose the options that best suit your needs.

Adding Tailwind CSS and Prettier

With our Astro project set up, it's time to add Tailwind CSS and Prettier. Run the following commands from within your new Astro project folder and accept the default options when prompted:

npx astro add tailwindcss
npm install prettier prettier-plugin-astro prettier-plugin-tailwindcss

Configuring Prettier

To configure Prettier, create a .prettierrc file in the root directory of your project and paste the following configuration:

   "useTabs": true,
   "singleQuote": true,
   "trailingComma": "none",
   "semi": false,
   "printWidth": 100,
   "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
   "pluginSearchDirs": false

It's essential to include the plugins and pluginSearchDirs properties in this context; otherwise, the integration will not function as intended. When working with a framework integration, such as Svelte (prettier-plugin-svelte), it's necessary to include them in the plugins properties.

Additionally, create a .prettierignore file with the following content to exclude specific files from Prettier's formatting:



Congratulations! You've successfully integrated Prettier with Astro and Tailwind CSS. As a result, your code will now look cleaner and more professional, making it easier for you and your team to collaborate and maintain your projects. If you need any help or have questions about this process, please don't hesitate to get in touch.

Frequently asked questions


Let's dive deeper into some frequently asked questions.

Can I customize the Prettier configuration to match my coding style?

Of course! Feel free to tweak the .prettierrc file to match your preferred coding style. You can find the full list of configuration options in the official Prettier documentation.

Can I use Prettier with other frameworks or libraries?

Yes, Prettier is highly versatile and can be used with various frameworks and libraries. However, you may need to install additional plugins or adjust your configuration.