url imports do not get a top level in v4

[IdoLeshkowitz]

My main css stylesheet is importing another css stylesheet that has a url import.

app.css

@import "tailwindcss";
@import "./other.css"

other.css

@import url("some_url") 

before v4- the output generated css file from tailwind had the @import url("some_url") on the top of the file.
after the update, the url import no longer appears on the top level of the output file, which affectively makes the import invalid.

[wongjn]

Yep, so in v4, you are responsible for the correct @import order. As per the documentation:

If you're loading a font from a service like Google Fonts, make sure to put the @import at the very top of your CSS file:

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

@theme {
  --font-roboto: 'Roboto', sans-serif;
}

[jc00ke]

I saw that documentation and found comfort in your answer, but then why does tailwind generate the @supports... and put it at the top, thereby causing the error on line 43? I'm super confused by this behavior.

[wongjn]

You are experiencing a bug in v4.1.0. This bug was fixed in #17493. Consider updating Tailwind CSS to v4.1.1 or later.

[jc00ke]

Gah, thank you! I didn't even think to look for a later than 4.1.0 version based on the dropdown on the docs.

I'll give v4.1.1 a try 🙏