Does extending TailwindCSS with utility classes affect the final build size?

Question

Does using a custom border radius alias like this add to the final CSS build size, beyond the (what I assume is) minimal definition of the class itself?

theme: {
  extend: {
    borderRadius: {
      card: ({ theme }) => theme('borderRadius.sm'),
    },
  },
}

In other words, will rounded-card in my HTML result in extra CSS compared to just using rounded-sm, or does Tailwind optimize this since they use the same underlying value?

Answer 1

rounded-card would be a separate extra distinct rule to rounded-sm.

---

Notes

This configuration would actually cause an error – no theme() function would exist in the first parameter object when the card function is called. This would cause a TypeError: theme is not a function error and Tailwind would not compile.

You may have meant:

theme: {
  extend: {
    borderRadius: ({ theme }) => ({
      card: theme('borderRadius.sm'),
    }),
  },
},

However, this would not work either due to a infinite loop. This is because when you call theme(), Tailwind resolves the configuration for borderRadius. To do this, it will traverse through all configurations, including this one. It will then call the above function, which calls theme(), which calls the above value function, etc.

At best, you may have meant:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        card: defaultTheme.borderRadius.sm,
      },
    },
  },
};