尝试通过添加这个类font-[variant]来使用JIT特性,但没有任何效果。我知道我可以使用@apply指令并添加普通的CSS,但我想确保没有Tailwind方法来完成它。任何帮助都很感激
font-[variant]
@apply
hwamh0ep1#
顺风的方式将是为每个font-variant属性编写自定义插件。本示例将添加对font-varaint-ligatures的支持。您尝试font-variant-[variant]的方法将不起作用,因为ligatures, east-easian, etc是属性的一部分,而不是值的一部分
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
.variant-ligatures-historical { font-variant-ligatures: historical-ligatures; }
sm:variant-ligatures-historical为
sm:variant-ligatures-historical
@media (min-width: 640px) { .sm\:variant-ligatures-historical { font-variant-ligatures: historical-ligatures; } }
1条答案
按热度按时间hwamh0ep1#
顺风的方式将是为每个font-variant属性编写自定义插件。本示例将添加对
font-varaint-ligatures
的支持。您尝试font-variant-[variant]
的方法将不起作用,因为ligatures, east-easian, etc
是属性的一部分,而不是值的一部分注意:不幸的是,下面的示例不支持JIT功能,因为缺乏有关添加自定义JIT实用程序的支持的信息(至少目前是这样)
在这种情况下,
variant-ligatures-historical
将被呈现为sm:variant-ligatures-historical
为