font-{name} utility not generated from --font-{name} CSS custom properties

[Code-Victor]

Description:

Environment

• Expo with React Native
• Using uniwind for Tailwind CSS support
• Custom font workflow (single font file with multiple weights)

Background

My Expo app uses a custom font setup where I can specify the font family name and weight directly, rather than using separate font files for each weight (e.g., ClashDisplayBold, ClashDisplayRegular):

<Text
  style={{
    fontFamily: "Clash Display",
    fontWeight: "600",
    fontSize: 24,
  }}
>
  Hello
</Text>

Expected Behavior

According to the docs, defining font custom properties in global.css should auto-generate corresponding font-* utility classes:

@import "tailwindcss";
@import "uniwind";

@source "../"; /* Monorepo support */

@layer theme {
  :root {
    --font-clash: "Clash Display";
    --font-outfit: "Outfit";
  }
}

I expected font-clash and font-outfit classes to be available.

Actual Behavior

The font-clash and font-outfit utility classes are not generated. Using them produces no effect or a missing class error.

Workaround

I had to manually define custom utilities:

@utility font-clash {
  font-family: var(--font-clash);
}

@utility font-outfit {
  font-family: var(--font-outfit);
}

Questions

1. Is this the expected behavior, or is there something wrong with my configuration?
2. Should I be using a different property name format (e.g., --font-family-clash instead of --font-clash)?
3. Is there documentation for the correct approach when using custom fonts with non-standard naming conventions?

[github-actions]

This issue has been automatically closed because it lacks a clear, minimal reproduction that we can use to verify the reported bug.

[Code-Victor]

Rather than placing the theme in the @layer, put it directly in the @theme
e.g

@theme {
  /* Fonts */
  --font-clash: "Clash Display";
  --font-outfit: "Outfit";
}