I go this working. I had to add the path to my prettier config in my .vscode/setttings.json file.

🌐
Astro Tips
astro-tips.dev › tips › prettier
Setting up Prettier | Astro Tips
Start by installing prettier-plugin-tailwindcss using your preferred package manager: ... Next, update the Prettier Config to include following plugins. This example will use .prettierrc: ... Make sure to place the Tailwind CSS plugin at the end. Additionally, you might need to reload your ...
Discussions

Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3
What version of prettier-plugin-tailwindcss are you using? v0.4.1 What version of Tailwind CSS are you using? v3.3.3 What version of Node.js are you using? v18.16.1 What package manager are you usi... More on github.com
🌐 github.com
30
July 19, 2023
Plugin not working
What version of prettier-plugin-tailwindcss are you using? "prettier": "^3.0.0", What version of Tailwind CSS are you using? "tailwindcss": "^3.3.3" What ver... More on github.com
🌐 github.com
20
July 23, 2023
Astro extension doesn't use `prettier-plugin-tailwindcss` when formatting
Is this a configuration problem, or is it an issue with the Astro extension? ... A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. - GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS tha... More on answeroverflow.com
🌐 answeroverflow.com
March 5, 2023
🐛 BUG: prettier-plugin-tailwindcss doesn't work in .astro files
Describe the Bug prettier-plugin-tailwindcss doesn't work in .astro files. Steps to Reproduce In an Astro project, run npm i -D prettier prettier-plugin-astro prettier-plugin-tailwindcss. Add Tailwind classes and save: classes are not re... More on github.com
🌐 github.com
10
May 28, 2022
People also ask

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.

🌐
straffesites.com
straffesites.com › en › blog › integrate prettier astro tailwindcss
Integrate Prettier with Astro & Tailwind CSS for Cleaner Code - ...
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.

🌐
straffesites.com
straffesites.com › en › blog › integrate prettier astro tailwindcss
Integrate Prettier with Astro & Tailwind CSS for Cleaner Code - ...
🌐
Web Reaper
webreaper.dev › posts › astro-prettier-tailwind-setup
Setup Astro 3.0 with Tailwind CSS Prettier Plugin
September 9, 2023 - You do not need to do this if you don’t want Tailwind classes to auto-sort. The Astro extension uses prettier under the hood, so you can still use it to format your code, it just won’t auto-sort tailwind classes. Website updated to Astro 3.0 (including any other @astrojs integrations) Visual Studio Code (or another editor with Prettier support) ... There are two plugins you will need to install.
🌐
Straffesites
straffesites.com › en › blog › integrate prettier astro tailwindcss
Integrate Prettier with Astro & Tailwind CSS for Cleaner Code - Straffe Sites
December 4, 2024 - { "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.
🌐
GitHub
github.com › tailwindlabs › prettier-plugin-tailwindcss › issues › 186
Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3 · Issue #186 · tailwindlabs/prettier-plugin-tailwindcss
July 19, 2023 - Tailwind config is located in in ... give explicit reasons. I have tried to reinstall dependencies, restart the VSCode, Both the "format on save" option and the npx prettier --write ....
Author   GeoGeorgeous
🌐
GitHub
github.com › tailwindlabs › prettier-plugin-tailwindcss › issues › 191
Plugin not working · Issue #191 · tailwindlabs/prettier-plugin-tailwindcss
July 23, 2023 - prettier-plugin-tailwindcss simply doesn't work when I save. No class is shifted. I use this plugin in my astro project inside svelte components where I have tailwind.
Author   andreibadescu
🌐
Answer Overflow
answeroverflow.com › m › 1081950205626298368
Astro extension doesn't use `prettier-plugin-tailwindcss ...
March 5, 2023 - { plugins: [ require.resolve("prettier-plugin-astro"), require.resolve("prettier-plugin-tailwindcss"), // last ], pluginSearchDirs: false, } And formatting with Prettier CLI works:
Find elsewhere
🌐
GitHub
github.com › withastro › prettier-plugin-astro › issues › 202
🐛 BUG: prettier-plugin-tailwindcss doesn't work in .astro files · Issue #202 · withastro/prettier-plugin-astro
May 28, 2022 - In an Astro project, run npm i -D prettier prettier-plugin-astro prettier-plugin-tailwindcss. Add Tailwind classes and save: classes are not reordered according to the recommended class order.
Published   May 28, 2022
Author   inwardmovement
🌐
GitHub
github.com › tailwindlabs › prettier-plugin-tailwindcss
GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. · GitHub
This plugin uses Prettier APIs that can only be used by one plugin at a time, making it incompatible with other Prettier plugins implemented the same way. To solve this we've added explicit per-plugin workarounds that enable compatibility with the following Prettier plugins: ... One limitation with this approach is that prettier-plugin-tailwindcss must be loaded last.
Starred by 7.1K users
Forked by 176 users
Languages   TypeScript 97.6% | JavaScript 2.4%
🌐
GitHub
github.com › tailwindlabs › tailwindcss › discussions › 11836
I can't get prettier to work on my Astro site [Prettier Plugin] · tailwindlabs/tailwindcss · Discussion #11836
module.exports = { plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'], tailwindConfig: './tailwind.config.cjs' } created .prettierc file https://github.com/Albertyhu/uthan-template/blob/main/.prettierrc · Used the following command line on the terminal npx prettier . --write · However, I didn't notice any change or re-organization of my tailwind classes.
Author   tailwindlabs
🌐
GitHub
github.com › tailwindlabs › prettier-plugin-tailwindcss › issues › 319
Can't resolve 'prettier-plugin-astro' · Issue #319 · tailwindlabs/prettier-plugin-tailwindcss
✖ prettier --single-quote --write: [error] Can't resolve 'prettier-plugin-astro' in '/Users/denchen/git/ui/node_modules/prettier-plugin-tailwindcss/dist/index.mjs' The text was updated successfully, but these errors were encountered: ... The same problem. ... I have a very similar issue in a new nextjs 14 project I started. However, I am getting Can't resolve @shopify/prettier-plugin-liquid. ... I started to have a similar problem on an Astro project right after updating to 0.6.7 (0.6.6 works well).
🌐
Answer Overflow
answeroverflow.com › m › 1153838557769764874
Getting Astro to work with prettier-plugin-tailwindcss - Kevin Powell - Community
September 19, 2023 - I can't for the life of me get the Tailwind plugin to work with Astro files in VS Code. I've tried several approaches I've found online, including the guide linked from the Astro website: https://straffesites.com/en/blog/integrate-prettier-astro-tailwindcss Has anyone had success getting this ...
🌐
Lightrun
lightrun.com › answers › tailwindlabs-prettier-plugin-tailwindcss-incompatibility-with-other-prettier-plugins
Incompatibility with other Prettier plugins
We’ve done this by automatically detecting if one of these plugins is installed and enabled in your project, and if it is, we do some magic behind the scenes in our plugin to make sure these plugins still work. The one gotcha with this approach is that Prettier plugin autoloading is unreliable, because our plugin must come last in the list of plugins. For this reason, you’ll need to explicitly disable the pluginSearchDirs option, and define each of your Prettier plugins in the plugins array: // .prettierrc { // .. "plugins": [ "prettier-plugin-astro", "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss" // MUST come last ], "pluginSearchDirs": false }
🌐
Astro
docs.astro.build › en › editor-setup
Editor setup - Astro Docs
These additional plugins may need to be listed in a specific order. For example, if you use Tailwind, prettier-plugin-tailwindcss must be the last Prettier plugin in the plugins array.
🌐
Raj Vadeghar
r44j.dev › home › blog › beginner's guide to setting up astro: astro + prettier + eslint + tailwind css
Effortless Code Styling: Configuring Astro with Prettier, ESLint, and Tailwind CSS | R44j
January 9, 2026 - Install the prettier extension on VS Code, and use the following command to install prettier packages ... If you haven't installed tailwind css, you can skip adding prettier-plugin-tailwindcss.
🌐
npm
npmjs.com › package › prettier-plugin-tailwindcss
prettier-plugin-tailwindcss - npm
December 1, 2025 - This plugin uses Prettier APIs that can only be used by one plugin at a time, making it incompatible with other Prettier plugins implemented the same way. To solve this we've added explicit per-plugin workarounds that enable compatibility with the following Prettier plugins: ... One limitation with this approach is that prettier-plugin-tailwindcss must be loaded last.
      » npm install prettier-plugin-tailwindcss
    
🌐
Reddit
reddit.com › r/tailwindcss › vs code extension for formatting tailwind classes (jsx/tsx)
r/tailwindcss on Reddit: VS Code Extension for Formatting Tailwind Classes (JSX/TSX)
March 26, 2025 -

Got into Tailwind last year when developing a personal project and ended up loving it, but disliked the utility class name bloat so I decided to make a VS Code formatter extension to prevent me from going insane. Hoping this helps anyone else out there with the same frustrations.

(Currently only JSX/TSX files supported, but I'm working on potential multi-language support for the next version. The code is open-source and can be found here: GitHub Repo)

Let me know if you find any bugs or issues. And if you liked the extension, please consider a rating/review, a star on the repo, or maybe even a sponsor :) or feel free to just share it around!

Tailwind Formatter Extension Demo

Extension Link: https://marketplace.visualstudio.com/items?itemName=Myhtica.tailwind-formatter

🌐
Roots Discourse
discourse.roots.io › sage
Lost trying to get prettier-plugin-tailwindcss working - sage - Roots Discourse
October 22, 2022 - I’m new to Sage 10 so forgive me If I am missing something glaring. I cannot seem to get prettier for tailwindcss working. I have installed the plugins: npm install -D prettier prettier-plugin-tailwindcss I have updated my tailwind.config.cjs plugins: [ require("prettier-plugin-tailwindcss"), require("@tailwindcss/aspect-ratio"), ], bud development compiles without error but classes are not getting sorted.