templ fmt is not picking prettier-plugin-tailwindcss when running prettier #1263
Description
As discussed in #1255, I wrote a custom formatter for neovim with conform because templ fmt wasn't applying the prettier plugins when running prettier. I am not sure why, so I would love to understand better how you are running prettier on the templ components, because I read that it should work. But I don't see it working.
What is installed:
❯ go tool templ version
v0.3.943
❯ go version
go version go1.25.0 linux/amd64
❯ npm ls
prettierd_templ@ /home/dem/projects/playground/prettierd_templ
├── @tailwindcss/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]
❯ cat prettier.config.js
/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
export default {
plugins: ["prettier-plugin-tailwindcss"],
};Here is an unformatted foo.templ file:
package main
templ Foo() {
<div> <p class="text-lg font-medium hello">Hello</p>
</div>
}If I run prettier on the templ file with the html parser, it works (but formatting is broken of course). However the tailwind classes are sorted:
❯ npx prettier --plugin=prettier-plugin-tailwindcss --stdin-filepath --parser=html foo.templ
package main templ Foo() {
<div><p class="hello text-lg font-medium">Hello</p></div>
}If I run templ fmt on the file, it gets formatted, but the classes remain untouched:
❯ go tool templ fmt -v -stdout foo.templ
(✓) Walking directory [ path=foo.templ ]
package main
templ Foo() {
<div>
<p class="text-lg font-medium hello">Hello</p>
</div>
}
(✓) foo.templ [ duration=74.7945ms ]
(✓) Format Complete [ count=1 errors=0 changed=1 duration=74.954275ms ]Same result if I explicitely require prettier and the plugin:
❯ go tool templ fmt -v -stdout -prettier-required -prettier-command "npx prettier --plugin=prettier-plugin-tailwindcss --stdin-filepath $TEMPL_PRETTIER_FILENAME" foo.templ
(✓) Walking directory [ path=foo.templ ]
package main
templ Foo() {
<div>
<p class="text-lg font-medium hello">Hello</p>
</div>
}
(✓) foo.templ [ duration=42.136509ms ]
(✓) Format Complete [ count=1 errors=0 changed=1 duration=42.353209ms ]Is this a bug or does templ fmt filter the html elements in the templ components in a specific way?