Tailwind CSS 中自定义实用程序类和原子类哪个优先级更高？

Question

我在

tailwind.config.js

中定义了自定义类，如：

module.exports = {
    theme: {
        extend: {

            fontSize: {
                'regular-12': [
                    '12px',
                    {
                        lineHeight: '20px',
                        fontWeight: '400',
                    },
                ],
            }

        },
    },
};

然后在html中使用：

class="font-bold text-regular-12"

最后的

font-weight

是“大胆”还是“正常”？

目前看来

font-weight

设置为

bold

风格，但我还是看不懂。

Answer 1

在创建的 CSS 中，扩展类

.text-regular-12

列在类

.font-bold

之前。

这两个类具有相同的特异性，因此决定因素是它们在 CSS 文件中的顺序。后来出现的类将优先于之前定义的类。

因此，由于此顺序，文本最终将具有粗体字体粗细。

您可以在此处的示例输出中看到这一点：https://play.tailwindcss.com/uPHbxiHakY?file=css