Migration tool does not migrate theme in Svelte files

[benmccann]

What version of Tailwind CSS are you using?

v4

What build tool (or framework if it abstracts the build tool) are you using?

Vite

What version of Node.js are you using?

22.11.0

What browser are you using?

Chrome

What operating system are you using?

Linux

Reproduction URL

Create a new Svelte + Tailwind 3 project with npx [email protected] create and choose tailwind when setting up the project

Describe your issue

When you run the migration tool, it does not add @reference "tailwindcss/theme"; to your .svelte files. It took me awhile to figure out why my site wasn't working after running the migration tool and this turned out to be the main issue

[RobinMalfait]

Hey!

Yeah the upgrade tool does a lot, but not everything unfortunately. Moved this to the ideas discussion because it's not a bug right now but can definitely be improved.

Just have to noodle on this one to make sure if it is doable to introduce these references automatically.

The upgrade tool updates the CSS files which we have a proper parser for. And it can also replace classes here and there but that doesn't require a parser for HTML / PHP / ... and so on.

In this case, it would require some parser to make sure that we inject it in the correct spot.
Another much harder question is to know what to reference (which is one of the reasons why we don't do it automatically right now).

The easiest thing to reference is just @reference "tailwindcss";, but in your case, you are already using @reference "tailwindcss/theme"; which also works but we need to make sure it's the correct thing.

What makes it more difficult is if you have custom CSS files with @theme blocks, then we have to probably reference that file instead.
And to top it all of, what if you have a front-end.css and admin-dashboard.css with custom @theme blocks then it's even harder for us (if not impossible) which one to link to.

[benmccann]

I can answer the parser question. I'm a Svelte maintainer and we don't actually have a parser for locating the css block, but just use a regex for it. We then parse the css block with a css parser. You should be safe to use the regex approach as well since it's what the official Svelte compiler does

[benmccann]

The easiest thing to reference is just @reference "tailwindcss";, but in your case, you are already using @reference "tailwindcss/theme"; which also works but we need to make sure it's the correct thing.

I did that because the docs had suggested tailwindcss/theme in one place, but it that was an outdated reference and has now been updated to say tailwindcss, so it seems like that's what should be used in the default case: tailwindlabs/tailwindcss.com#2127

What makes it more difficult is if you have custom CSS files with @theme blocks, then we have to probably reference that file instead.
And to top it all of, what if you have a front-end.css and admin-dashboard.css with custom @theme blocks then it's even harder for us (if not impossible) which one to link to.

A suggestion if you can't figure out what to put there is to instead put a comment notifying the user must do it. E.g. something like // @migration-task: add @reference to appropriate theme here. It was really hard upgrading to not understand what was causing things to break. Having something like this as a pointer would have made the process a lot smoother and less frustrating