prettier-plugin-tailwindcss icon indicating copy to clipboard operation
prettier-plugin-tailwindcss copied to clipboard

Imports using tsconfig paths do not work

Open ttoino opened this issue 2 months ago • 5 comments

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).

ttoino avatar Nov 09 '25 19:11 ttoino

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.

thecrypticace avatar Nov 10 '25 13:11 thecrypticace

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.

ttoino avatar Nov 10 '25 15:11 ttoino

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.

thecrypticace avatar Nov 10 '25 22:11 thecrypticace

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' 

am1006 avatar Nov 12 '25 05:11 am1006

it's going to happen to any project using tsconfig paths / bundler aliases / etc…

thecrypticace avatar Nov 12 '25 12:11 thecrypticace