Imports using tsconfig paths do not work
What version of prettier-plugin-tailwindcss are you using?
v0.7.1
What version of Tailwind CSS are you using?
v4.1.17
What version of Node.js are you using?
v22.20.0
What package manager are you using?
pnpm v10.19.0
What operating system are you using?
Linux
Reproduction URL
https://github.com/ttoino/svelte-prettier-tailwind-error-repro
Relevant files are .prettierrc, src/app.css, and src/lib/test.css.
Describe your issue
@importing a CSS file in your tailwind stylesheet in a SvelteKit project results in an error when formatting if said file is in the $lib folder. This used to work in previous versions of the plugin (pre v0.7).
this did not work in v0.6.x — it silently fell back sorting with v3 (and therefore ignoring your theme) due to the way compatibility with multiple versions worked at the time. We changed this in v0.7.x to properly surface issues like this.
Fixing this requires loading typescript config paths — will need to think through this.
Interesting, it's definitely better to error out than to silently ignore the theme. I'll just use a relative path for the time being.
An alternative you could use is subpath imports — which do work already. I just added an explicit test for this:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss/commit/dd02e91c60c7b07dbf22b0fda134db9707899a22#diff-62fd529e3226614c7fc2fcbb0427dfe8bb7a9de64c57fd7467a87cb52c7da04eR8-R10
I think the TypeScript language server supports them — may need to tweak your tsconfig but not sure.
Just adding a comment here - this happens for React projects too.
For example, my entry css file has a few imports..
@import "@/assets/styles/upgrade_from_v3.css";
@import "@/assets/styles/shadcn.css";
@import "@/assets/styles/fonts.css";
And the prettier would return the following error with v0.7.x plugin:
["ERROR" - 16:53:23] Error formatting document.
["ERROR" - 16:53:23] Can't resolve '@/assets/styles/upgrade_from_v3.css'
it's going to happen to any project using tsconfig paths / bundler aliases / etc…