CSS Generation Issue between v4.0.14 and v4.0.15 in TailwindCSS

[PruthviPraj00]

I have encountered a discrepancy in the generated CSS between v4.0.14 and v4.0.15 of TailwindCSS. The issue lies in the generated CSS for custom properties (CSS variables). The following sections highlight the differences between the two versions.

CSS Generated in v4.0.14: not the complete file.

V4.0.14.md

Tailwindcss Package.json in node_module

CSS Generated in v4.0.15: not the complete file.

v4.0.15.md

tailwindcss Package json

Comparison Screenshots: On the left side is v4.0.14, and on the right side is v4.0.15.

Key Differences:

1. Missing Custom Properties (CSS Variables) in v4.0.15:
   • The following variables are missing in v4.0.15:
     • --default-font-family
     • --default-font-feature-settings
     • --default-font-variation-settings
     • --default-mono-font-family
     • --default-mono-font-feature-settings
     • --default-mono-font-variation-settings
   • These variables were present in v4.0.14 but are not being generated in v4.0.15.
2. Potential Impact:
   • The missing variables may cause issues with font settings, particularly if they are being used for consistent typography throughout the application.
   • This could lead to rendering inconsistencies and make it difficult to maintain the project across different environments.

[wongjn]

This seems to be a change by #17036, in particular #17036 (comment)

[PruthviPraj00]

I have reviewed the changelog and come to the same conclusion, but what steps can I take to fix it?

[wongjn]

How are you using the missing CSS variables in your project?

[adamwathan]

Hey! Can you explain what is actually broken in your project? The goal of that change was to remove those variables if they weren’t being used, but if they are being used they should be preserved.

[PruthviPraj00]

Hi @adamwathan,

I apologize for the confusion, but the issue actually came from a third-party plugin. Tailwind itself does not have this problem.

If possible, I would like to understand how the variable generation works in @themes{}.

In the image below, which is from the Tailwind CSS playground, even though font-sans is not being used, the variable --default-font-family is still being generated.

Could you explain how this happens?

Thank you for your help!

[philipp-spiess]

@PruthviPraj00 Playground does use the --default-font-family variable, it's been added by Preflight that is enabled by default:

Regarding the issue you have with a third-party plugin: Can you create a minimal reproduction so we can take a look?

[PruthviPraj00]

Hello @philipp-spiess,

The third-party plugin is FlyonUI, which is a UI component library built with TailwindCSS.

You can find the zip file attached below.

flyonui.zip

[GauthierPLM]

Edit: the problem was the use of var(--default-font-family) when setting --font-sans. Removing it solved my issue.

---

hello,

We encounter the same issue where the font set with --font-sans is ignored.
This is the code used to load the font:

@import url('./assets/fonts/fonts.css') layer(base);
@import 'tailwindcss';

@config '../tailwind.config.js';

@theme {
  --font-sans: 'Inter', var(--default-font-family);
  /* ... */
}

/* ... */

And the font.css file imported in index.css:

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("InterVariable-Italic.woff2") format("woff2");
}

Rolling back to 4.0.14 fixes the issue with the font applied correctly.

[philipp-spiess]

@PruthviPraj00 Thanks for the reproduction! I pushed a fix for this onto main and we plan to release this with the next release soon!