@import statement from third-party css file disappears

[hans-ts]

Hi!

I am currently using version 4.1.16 of tailwind and @tailwindcss/vite. My project imports a third-party css file which starts with:

@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;600;700&display=swap";@layer theme,base,components,utilities;@lay....etc

When I run my project using vite, this @import statement disappears from the styles, causing the text to appear unstyled. Now, even weirder, if I manually edit the css file and put a space between @import and the url, the problem goes away.

Any thoughts?

[wongjn]

Seems like the third-party CSS could be authored incorrectly. I would expect the URL to be wrapped with url() like:

@import url("https://fonts.googleapis.com/css2?…");@layer theme,base,components…

However it might not be neccessary. Though I think perhaps at least a space does need to exist as you have found:

@import "https://fonts.googleapis.com/css2?…";@layer theme,base,components…

[hans-ts]

Though I think perhaps at least a space does need to exist as you have found

When we were on Tailwind 3, it did not have a space, and it worked okay.

[wongjn]

Looking in Lightning CSS playground (Tailwind uses it internally in production build), it retains the space, so perhaps something else is at play here.

[hans-ts]

Hmm, I know vite uses esbuild for css by default, maybe I need to switch it to lightning

[wongjn]

I don't think you should be consuming this compiled CSS if your project is also using Tailwind CSS. Consider @importing a "source" CSS file instead, so that the project compiles the CSS.

[hans-ts]

Hmm, for various reasons that may not be an option at the moment, but I will investigate.

Thank you!