How to generate Utility classes

Hi, I’m trying to create some typography utility classes. But in de “generator” under the Typography Variables I have to enter the name/property. So I did:

Classname: fs- | CSS property: font-size: var(—text-*)

That gives me “.fs-xxxl {

  1. font-size: var(–text-*): var(–text-xxxl);

}

How does that works? I can’t figure this out.

Hi Norman,
Welcome to the forum!

The CSS property is only font-size:

Best regards,
timmse

1 Like

Thanks you so much! When inspecting this in de browser I see:

.fs-xxl.brxe-heading {
font-size: var(–text-xxl);
}

These are not really utility classes. Is this normal? Why not only the utility class selector. “.fs-xxl” Is this a setting?

That’s class chaining. You can disable it in the settings: