The [tailwind-unimportant](https://github.com/mwnciau/tailwindcss-unimportant) plugin for Tailwind solves this problem if you don't want to use `tw-merge` or aren't using JavaScript. It adds a variant that reduces the specificity of the component classes, instead of having to use important or otherwise increase specificity in your pages.
Your button classes would change to:
```css -:w-24 -:py-3 -:bg-red-500 -:text-white -:font-bold -:rounded-full ```
Then when you add your classes in the page, they would be applied in preference to the "unimportant" classes.

The [tailwind-unimportant](https://github.com/mwnciau/tailwindcss-unimportant) plugin for Tailwind solves this problem if you don't want to use `tw-merge` or aren't using JavaScript. It adds a variant that allows the component classes to be overridden.
Your example would become:
```js const TextBox = ({ addClassName, children }) => { const className = `-:text-xl -:leading-7.5 -:font-lato -:font-normal ${addClassName}`; return <div className={className}>{children}</div>; }; ```
```js <TextBox addClassName="text-4xl">My New Text</TextBox> ```