@import statement is not working in v4.0.2

[withden]

What version of Tailwind CSS are you using?

v4.0.2

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

N/A

What version of Node.js are you using?

N/A

What browser are you using?

N/A

What operating system are you using?

N/A

Reproduction URL

https://play.tailwindcss.com/ykSBTsCL3K

Describe your issue

When we use @import url('https://...') for font files, it will be removed in the final CSS (compiled via tailwindcss)

[wongjn]

So what is happening is as per the MDN documentation:

An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

So @import "tailwindcss"; gets replaced inline with Tailwind-compiled CSS. This then leaves the font @import afterwards which - as per the above - causes the @import to be ignored. Hence why the @import font needs to be before `@import "tailwindcss";".

[withden]

So what is happening is as per the MDN documentation:

An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

So @import "tailwindcss"; gets replaced inline with Tailwind-compiled CSS. This then leaves the font @import afterwards which - as per the above - causes the @import to be ignored. Hence why the @import font needs to be before `@import "tailwindcss";".

But I use @import at the top already, can you check that in the tailwind play link? Anythings need to be changed in that to work.

[wongjn]

Oh, I see what you mean now, sorry! Yes, tested locally and it seems like a regression in v4.0.2.

[maybeken]

Able to confirm above with impact to latest deployments using v4.0.2. Current remediation is to revert back to v4.0.0.

Use case impacted: Integration with Google Fonts

[wongjn]

v4.0.1 should work too.

[maybeken]

Just tested on v4.0.1, also impacted.

[wongjn]

Are you sure you have Tailwind v4.0.1 all the way down the dependency tree? It might sneak 4.0.2 in somewhere:

$ npm list tailwindcss
test@ /path/to/project
├─┬ @tailwindcss/cli@4.0.1
│ ├─┬ @tailwindcss/node@4.0.2
│ │ └── tailwindcss@4.0.2
│ └── tailwindcss@4.0.1 deduped
└── tailwindcss@4.0.1

[withden]

Just tested on v4.0.1, also impacted.

I checked on that, it's working fine. I think you need to remove node_module and lock the file to reset to v4.0.1

[maybeken]

Thanks, probably my pnpm still cached with 4.0.2 when reseting.

[Anuj-Kumar-Sharma]

I moved back to v4.0.0 after clean cache. But still the custom font is not working.

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import "tailwindcss";

body {
  @apply font-display;
}

@theme {
  --font-display: "Oswald", serif;
}

Funny thing is, it was working on another project yesterday (v4.0.1) but now not working on even 4.0.0