Weird app.css merge behaviour.

[danielniccoli]

I successfully followed this guide to implement Tailwind CSS.

Now I want to add Inter via inter-ui. I installed the package via npm install inter-ui --prefix assets and added the following statement to /assets/js/app.js: import "inter-ui". After adding the statement, /priv/static/assets/app.css now only contain the imported css, instead of complementing it.

To figure out what's happening, I created /assets/css/test.css

body {
    font-family: "Inter" !important;
}

Then I added the following lines to /assets/css/app.js

import "../css/test.css"
import "inter-ui"

And the resulting /priv/static/assets/app.css contains both, the content of /assets/css/test.css and inter:

/* css/test.css */
body {
  font-family: "Inter" !important;
}

/* node_modules/inter-ui/inter.css */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(./Inter-Thin-3L5KITMZ.woff2?v=3.19) format("woff2"), url(./Inter-Thin-CYZF3GYP.woff?v=3.19) format("woff");
}

// ...

---

Then I noticed that removing import "inter-ui" does leave the content of /assets/css/test.css in /assets/css/app.css. However, app.css now is one big tailwind file with the content of test.css merged completely (no /* css/test.css */ comments).

When replacing import "inter-ui" with import "../css/test.css", instead of merging the CSS /assets/css/app.css now solely contains the inter style definitions.

Is this behaviour intended, and if so, how would I import inter-ui when using tailwind?

[danielniccoli]

I already need to comment this. While trying some more with different versions of /assets/css/app.js I observe that with different import statements comes no predictable generation of /priv/static/assets/app.css. It seems like its generation is either random, or affected by how the file changes, being A -> B and C -> B lead to different outcomes.

[josevalim]

We simply delegate to tailwind, so this would be a tailwind behaviour, so I recommend investigating it there. Thanks!