@font-face declarations breaking

[ghost]

Using the new @tailwindcss/jit compiler seems to break font-face declarations added to base styles.

Using code like this in your CSS entry point:

@layer base {
  @font-face {
    font-family: "test";
    src: url("/fonts/test.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "test";
    src: url("/fonts/test-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
}

Results in the following CSS during dev and build:

  @font-face {
    font-family: "test";
    src: url("/fonts/test.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-family: "test";
    src: url("/fonts/test-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

Without JIT, the font-face declarations are compiled to individual declarations and work as usual.

Versions:

"@tailwindcss/jit": "^0.1.0",
"tailwindcss": "^2.0.3",

[ynotdraw]

Hitting the same thing where my css file is almost identical to the heroicons repo: https://github.com/tailwindlabs/heroicons.com/blob/master/src/css/main.css

[l0st0]

Same here

[benbender]

It seems like @layer base isnt working. I had the same problem but if I remove @layer base, it starts working again (but might add scoping issues...).

[Rednegniw]

This is an issue for me as well

[florianbouvot]

Same for me

[adamwathan]

Should be fixed in v0.1.1, thanks for reporting!

[maccman]

I think this explains why my whole app is italic 🤣