Problem with @import with tailwindcss JIT and laravel

Hi, I’m using tailwidcss JIT and laravel with laravel mix. I’ve a problem with css variables. I’ve three files: app.css, _variables.css and global.css. If I import the _variables.css file in global.css or in app.css it compiles correctly in app.min.css but I can’t see any changes related to css variables in browse. Instead if I put all the rules in one file, it works. I can’t figure why. Can you help me? Below my files:

app.css

@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";

@import "partials/_variables.css";
@import "partials/_global.css";

_variables.css

:root {
    /* Font family */
    --main-font-family: "'Inter', sans-serif";

    /* Width */
    --max-width-content: "100rem";

    /* Colors */
    --color-primary: #006633;
    --color-secondary: #FF7700;
}

_global.css

html {
    @apply h-full font-base;
}

body {
    @apply min-h-full font-base antialiased bg-primary;
}

[RyanZim]

As per the docs:

This plugin attempts to follow the CSS @import spec; @import statements must precede all other statements (besides @charset).

[giuliac89]

Quite right, thank you!