Question

I defined a custom class in tailwind.config.js, such as:

module.exports = {
    theme: {
        extend: {
            fontSize: {
                 regular-12 : [
                     12px ,
                    {
                        lineHeight:  20px ,
                        fontWeight:  400 ,
                    },
                ],
            }

        },
    },
};

and then use in html:

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

最后的<代码>font-chlorinat>/code>bold或normal?

目前,<代码>font-chlorinat>/code>被定在<代码>bold上。

Answer 1

在创建的CSS中,扩大的类别.text-term-12列在类别前。


这两个班级具有相同的特性,因此决定因素是其在中央支助事务档案中的顺序。 以后出现的班级将优先于先前确定的班级。
因此,由于这一命令,案文最终将具有大胆的权重。
你们可以在此例产出中看到这一点:https://play.tailwindcs.com/uPHbxiHakY?file=cs。
If you want your custom class to override the font-weight you can define it in the css file like so:
@layer utilities {
  .text-regular-12 {
    @apply text-xs/5 font-normal;
  }
}

Demo: https://play.tailwindcss.com/N9PwsW1I75?file=cs

友情链接