CODEWITHSUNDEEP
csstailwind-css
Yassin Mokni
Yassin Mokni

Reputation: 393

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

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

Upvotes: 0

Views: 1279

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14213

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;
    }
}

Upvotes: 1

Related Questions