Add an alternative class order formatter (like prettier-plugin-tailwindcss) for Razor Views / cshtml

[codevogel]

Either I'm doing something silly, or this workflow is just very silly and might need to be improved.

I am working on an Umbraco project, which uses .cshtml files, or Razor files. Basically, html with .NET code embedded in it.

There is currently only support for class ordering through the prettier-plugin-tailwindcss. Prettier does not, however, support .cshtml files. I tried installing prettier and the tailwind prettier plugin, and adding this to my .prettierrc.json

{
  "overrides": [
    {
      "files": "*.cshtml",
      "options": {
        "plugins": ["prettier-plugin-tailwindcss"]
      }
    }
  ]
}

Then I ran npx prettier --write . --plugin tailwindcss, but no changes were made to my .cshtml files.

I found a botchy workaround, with the emphasis on botchy:

1. My main IDE for Umbraco projects is Rider.
2. I open a secondary IDE, VSCode, and add the following to settings.json

"editor.formatOnSave": true,
    "files.associations": {
        "*.cshtml": "html"
    }

3. This associates .cshtml files as html files, thus allowing me to 'force' a prettier format on the .cshtml file.
4. The tailwind classes get ordered, but the embedded c# code gets recognized as plain text in an HTML, and thus incorrectly formatted. I think the embedded code is being treated as just plain text/paragraphs, which results in all import syntaxes breaking, and needing manual fixing:

Code is combined and put on line:

@{ var email = Model.Links["email"]; var linkedin =
Model.Links["linkedin"]; var github = Model.Links["github"]; }

After a prettier run through VSCode as an HTML document:

After an autoformat in rider the syntax is still broken and needs manual edits:

5. I jump back into Rider and run the .cshtml formatter there, to undo the prettier formatting that was applied to the embedded C# code.

6. I now have my tailwind classes sorted in my Razor file.

I could think of a few ways to automate this process, but that just feels very botchy to me. It would be nice to have native support for formatting tailwind in Razor files.

[MaartenVrijdagOnline]

@codevogel have you found a better way of doing the ordering for the tailwind classes? I have the same situation here and have not found a very developer-friendly way of doing this.