Blog

2026 Mar 6

Reordering Tailwind classes in Astro using Prettier

Yesterday I spent some time getting VSCode Prettier plugins to work with both Astro and Tailwind CSS. I wanted Prettier to automatically reorder Tailwind’s utility classes in HTML, CSS, and Astro files.

Here are the two VSCode plugins in question:

Installation and configuration

The commands to install both of them as dev dependencies were straightforward:

npm install -D prettier prettier-plugin-tailwindcss
npm install -D prettier-plugin-astro

I opted for Tailwind’s suggestion to create a .prettierrc JSON file at the root level of the project. I found this advice online:

“Your configuration must list prettier-plugin-tailwindcss last in the plugins array for it to process the output of other plugins correctly. You should also explicitly define the parser for Astro files.”

.prettierrc:

{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss"
  ],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ],
  "tailwindStylesheet": "./src/styles/global.css"
}

Troubleshooting

I could see Tailwind classes being reordered in HTML and CSS files, but nothing was being changed in .astro files.

I verified there were no errors in VSCode’s Output panel for Prettier:

["INFO" - 9:10:30 AM] Using config file at /astro_site/.prettierrc
["INFO" - 9:10:30 AM] EditorConfig support is enabled, checking for .editorconfig files
["INFO" - 9:10:30 AM] Resolved config:
{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss"
  ],
  "tailwindStylesheet": "./src/styles/global.css"
}

I checked if Prettier was able to change .astro files using the CLI via the terminal. That worked, so the problem was in the code editor.

npx prettier --write src/layouts/BaseLayout.astro # this worked!

It turns out I overlooked a setting from the prettier-plugin-astro README to use Prettier as VSCode’s Default Formatter for .astro files.

User Settings:

{
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
}

And now I’ll never need to think about ordering Tailwind utility classes again!

2026 Mar 3

Starting from scratch

I haven’t kept a blog since the early days of the web when I used Blogger, Movable Type, and WordPress. I miss having an corner of the internet to call my own that’s not tied to social media ecosystems and all the baggage that comes with them. It will be nice to remember how to write something that’s longer than a tweet.

As a software engineer who’s currently looking for work I have an extra incentive to build a simple content-driven website from scratch. Astro seems to be one of the most popular options out there right now and I’m impressed with their docs, particularly their well-written “Build a blog” tutorial.

Behind-the-scenes, the blogging experience is merely a folder of Markdown files that I maintain with a text editor. The VSCode extension Front Matter CMS might be a way to manage some of that.

Progress on the website will be slow as I become more familiar with Astro and web services like Cloudinary for hosting photos.

So with that in mind, here goes nothing!

Blog Archive →