Competing classes - e.g. for errors - don't guarantee which will win

[weaverryan]

Hi!

Thanks for the bundle - we use it frequently :).

I noticed today that my error styling was off: notice the white text color:

The input does have dark:text-red-900. However, it also has dark:text-white from the normal, non-error styling. The dark:text-red-900 appears second, but that doesn't matter. By chance, in the generated CSS, dark:text-red-900 appears first... and so dark:text-white overrides it.

This is a tricky issue to solve: when the input has an error, some of the normal classes should not be applied. But, there is a library to help - https://github.com/gehrisandro/tailwind-merge-php - we could feed all of the classes into that, and it would remove the conflicts/duplicates to solve the problem.

WDYT?

[ker0x]

Hello @weaverryan,

Thanks for reporting this issue. It's something I've also noticed in one of my projects. I will take a look to the package you linked to see if it can help.

In the meantime, what you can do is override the relevant class blocks and prefix the error classes with !, this way the generated CSS will have !important for those classes

{% block class_input_error -%}
    !text-red-900 !bg-red-50 !border-red-500 !placeholder-red-700 !dark:bg-red-100 !dark:border-red-400 !dark:text-red-900 focus:z-10 !focus:ring-red-500 !focus:border-red-500 !dark:focus:ring-red-500 !dark:focus:border-red-500
{%- endblock class_input_error %}

[ker0x]

Hello @weaverryan,

I just release v0.2.6 for the bundle which should fix this issue!