Which has a higher priority, custom utility classes or atomic classes in Tailwind CSS?

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"

Is the final font-weight bold or normal?

Currently, it appears that the font-weight is set to bold style.

Answer 1

In the CSS that's created, the extended class .text-regular-12 is listed before the class .font-bold.

These two classes have the same specificity, so the deciding factor is their sequence in the CSS file. The classes that appear later will take precedence over those that were defined earlier.

Consequently, the text will end up having a bold font weight because of this order.

You can see this in the example output here: https://play.tailwindcss.com/uPHbxiHakY?file=css

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=css