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;
}