Lost trying to get prettier-plugin-tailwindcss working

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.

I have tried to add directives for bud.config.mjs but I really don’t know what I am doing.

Can anyone share some insight on what I should be looking for?

Thank you

prettier-plugin-tailwindcss isn’t a tailwind plugin so it shouldn’t be in your tailwind config.

Do you have prettier setup in your IDE/editor? For something like tailwind, I think it’d be ideal to format your files on save.

Sorting Tailwind CSS Classes Automatically with Prettier - YouTube is an official screencast from Tailwind Labs that might help you get started.

EDIT: Unfortunately I can’t get prettier-plugin-tailwindcss working properly with Blade files. It works great for css/javascript, though.

I think the fix for getting it to work with Blade would require using a Prettier Blade formatting plugin and I personally don’t want to do that.

Headwind - Visual Studio Marketplace has served me well but looks to be abandoned. I’m still going to use Headwind for now but the Prettier plugin would be ideal at some point.