How to acheive the font-variant-[caps,east-asian,ligatures] in Tailwind - css

Question

Tried to use the JIT feature by adding this class font-[variant] without any effect.
I know that I can use the #apply directive and add the normal CSS, but I wanted to be sure that there is no Tailwind way to do it.
Any help is appreciated

Answer 1

Tailwind way will be to write custom plugin for every font-variant property. This example will add support for font-varaint-ligatures.
The way you tried font-variant-[variant] will not work because ligatures, east-easian, etc are part of a property, not a value
NOTE: unfortunatelly example bellow DOES NOT support JIT feature as a lack of information about support for adding custom JIT utilities (at least for now)
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...config
plugins: [
plugin(
function ({ addUtilities, e }) {
// this class define how would you call it for ex 'variant-ligatures-[value]'
const yourClass = 'variant-ligatures';
// key - Tailwind 'caller', value - actual CSS property value
const values = {
'normal': 'normal',
'none': 'none',
'common': 'common-ligatures',
'no-common': 'no-common-ligatures',
'discretionary': 'discretionary-ligatures',
'no-discretionary': 'no-discretionary-ligatures',
'historical': 'historical-ligatures',
'no-historical': 'no-historical-ligatures',
'contextual': 'contextual',
'no-contextual': 'no-contextual',
'inherit': 'inherit',
'initial': 'initial',
'unset': 'unset',
};
// add support for responsive variants so you can use it like sm:variant-ligature-normal
const variants = ['responsive'];
addUtilities(
[
Object.entries(values).map(([key, value]) => {
return {
[`.${e(`${yourClass}-${key}`)}`]: {
'font-variant-ligatures': value, // CSS
},
}
}),
],
{ variants }
);
}
)
],
};
in this case variant-ligatures-historical will be rendered as
.variant-ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
and sm:variant-ligatures-historical as
#media (min-width: 640px) {
.sm\:variant-ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
}