Set up Astro with Tailwind and Prettier

I recently set up Astro for my personal website and wrote about why I chose Astro over Next.js. Today, I’m aiming to create another website — this time, using Astro with Tailwind and Prettier.

Setup Astro

First, let’s create the Astro project:

npm create astro@latest

I typically change the default port because I run multiple processes concurrently, and I want to avoid port conflicts. To do this, modify astro.config.mjs:

import { defineConfig } from 'astro/config';

export default defineConfig({
  server: {
    port: 8888
  },
})

Next update the project name in package.json and set the license to UNLICENSED.

Configure Tailwind

Astro comes pre-configured with a script that makes all the necessary changes:

yarn astro add tailwind

I often want to configure a custom base.css file, for example, to add custom fonts. To do this, disable the default Tailwind styles:

import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  integrations: [tailwind(
    {
      applyBaseStyles: false,
    }
  )]
});

Next, create a ./src/base.css and append the @font-face directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  /* add the properties */
}

Finally, import the base.css in your .astro files.

Adding Prettier

Next, let’s add Prettier and the Prettier Tailwind plugin:

yarn add prettier prettier-plugin-astro prettier-plugin-tailwindcss

Configure Prettier by adding the following configuration to package.json:

{
  "prettier": {
    "printWidth": 120,
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": false,
    "plugins": [
      "prettier-plugin-astro",
      "prettier-plugin-tailwindcss"
    ]
  }
}