Recommended way to add style to existing class in v4 ?

[anthonyhexium]

Hi,

Everything is in the title but what do you recommand ?

I want for example to add font-variation-settings: 'opsz' 32; to my font-sans class.

Should I do

.font-sans {
  font-variation-settings: 'opsz' 14;
}

Or

@utility font-sans {
  font-variation-settings: 'opsz' 14;
}

Thanks !

[wongjn]

You should be able to apply font-variation-settings via @theme, as per the documentation:

@theme {
  --font-sans: Foo, sans-serif;
  --font-sans--font-variation-settings: 'opsz' 14;
}

[anthonyhexium]

@wongjn it works yes (thank you). Maybe I didn't took the wright example ... 😅 What about this :

@utility prose {
  --tw-prose-bullets: var(--color-gray-800);
  --tw-prose-counters: var(--color-gray-800);
  --tw-prose-headings: var(--color-gray-950);
}

.prose :is(h1, h2, h3, h4, h5, h6) a {
  color: inherit;
  text-decoration: inherit;
  font-weight: inherit;
}

.prose ol > li::marker {
  font-weight: 700;
  font-family: var(--font-sans);
}

[wongjn]

As per the readme, you'd need to use a v3 tailwind.config.js file.