Классы TailwindCSS 3 не переопределяют предыдущие классы. ⇐ CSS

[Anonymous]

Я столкнулся с проблемой, которая в мире CSS просто ошеломляет. Классы TailwindCSS 3 просто не переопределяют предыдущие классы.

Например, есть такой компонент, который я создал:

import * как React из «реагировать»; const TextBox = ({ addClassName, Children }) => { const className = `text-xl Leading-7.5 Font-Lato Font-Normal ${addClassName}`; return {дети; }; экспортировать текстовое поле по умолчанию; Затем я использую этот компонент выше в другом месте, вот так:

Мой новый текст Теперь, когда я проверяю его в браузере, он показывает оба размера шрифта: Скриншот проверки браузера

class="text-xl Leading-7.5 Font-Lato Font-Normal Text-4xl" Как вы можете видеть, здесь присутствуют оба класса, оба относятся к размеру шрифта, и больший из них находится после меньшего.

И все же ТОЛЬКО маленький (исходный) размер шрифта будет доминирующим.

(кстати, я тоже пытался поместить переменную addClassName спереди, но безрезультатно)

Почему это?

Я ценю любую помощь в этом. Спасибо