顺风的方式将是为每个font-variant属性编写自定义插件。本示例将添加对font-varaint-ligatures的支持。您尝试font-variant-[variant]的方法将不起作用，因为ligatures, east-easian, etc是属性的一部分，而不是值的一部分

注意：不幸的是，下面的示例不支持JIT功能，因为缺乏有关添加自定义JIT实用程序的支持的信息（至少目前是这样）

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 }
                );
            }
        )
    ],
};

在这种情况下，variant-ligatures-historical将被呈现为

.variant-ligatures-historical {
  font-variant-ligatures: historical-ligatures;
}

sm:variant-ligatures-historical为

@media (min-width: 640px) {
    .sm\:variant-ligatures-historical {
        font-variant-ligatures: historical-ligatures;
    }
}