Custom text color overwritten by text size and text wrap

[torepettersen]

Describe the bug Custom text color conflicts with text size and text wrap, meaning they will overwrite each other.

I was able reproduce this conflict with text wrap and font sizes.

NOTE: I have not added my custom colors to the tails config.

To Reproduce

iex(1)> Tails.classes(["text-primary", "text-xs"])
"text-xs" # Expected "text-primary text-xs"
iex(2)> Tails.classes(["text-sm", "text-primary"])
"text-primary" # Expected "text-xs text-primary"
iex(3)> Tails.classes(["text-primary", "text-wrap"])
"text-wrap" # Expected "text-primary text-wrap"
iex(4)> Tails.classes(["text-wrap", "text-primary"])
"text-primary" # Expected "text-wrap text-primary"

Runtime

• Elixir version: 1.16.2
• Erlang version: 26.2.3
• OS: Arch
• Tails version: 0.1.10

[zachdaniel]

You’ll have to configure your colors for this to work. There isn’t really anything we can do otherwise.

[zachdaniel]

Is there a reason you haven’t added your colors to the config? It’s part of the set up guide that is pretty much necessary to use custom colors. You can also configure a list of classes not to merge anything with, but that would prevent merging always which isn’t what your want either.

[torepettersen]

@zachdaniel thanks for the quick answer. The reason I didn't add the colors to the config, is that I am trying out CSS variables.

I didin't think those variables would work in a JSON file, but they seems like just strings, to guess it would still be possible.

But also the merge behaviour seemed inconsistent with other types, like text alginment. E.g.

iex(1)> Tails.classes(["text-primary", "text-left"])
"text-left text-primary"

[zachdaniel]

Yeah, it depends ultimately on the merging logic for a given class. If there is an explicit list of values, we may not merge w/ that unknown class. But since many classes allow arbitrary stuff after the class name, we can't do that for every class.

[torepettersen]

Thanks for explaining 😊 I thought it made sense always keep unknown classes, but sounds more complex than that.

[torepettersen]

@zachdaniel in case you are not aware, Tailwind 4.0 will use CSS variables instead of tailwind.config.js.

So might have to rethink how to read custom variables if you will continue with support for Tailwind 4.0. But still probably a few months until that is stable.

[zachdaniel]

Yeah, that's going to be an interesting challenge isn't it...🤔I imagine we'll need some kind of hand written colors list? Unless we want to ship a css parser with tails 😂

[torepettersen]

Handwritten color list sounds like sounds like a good idea 💡 I guess a css parser was more than you imagined the scope of this library would be 😅

[zachdaniel]

I've added a color_classes config, explained in the readme, that will let you hand-write a list of color classes.

[torepettersen]

Wow, that was quick. Thank you :smiley: