Integrate Prettier with Astro and Tailwind CSS

Seppe Gadeyne

As a freelance web developer with expertise in optimizing website performance, I specialize in creating lightning-fast and SEO-optimized websites.

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!

Contents

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:

• Node.js (version 16.12.0 or higher)

• Visual Studio Code with these extensions: astro-vscode, prettier-vscode, and tailwindcss-intellisense

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:

node_modules/**

Conclusion

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.