Issue with Setting Tailwind and CSS Color Codes in ui.chip Color Property

[happybeginning1]

Question

Hello,

I've been exploring the ui.chip component as documented here: ui.chip documentation, which mentions that the color property can accept Quasar, Tailwind, or CSS color codes.

Using Quasar color values like pink-5 and yellow-7 works perfectly. However, I encounter issues when trying to use Tailwind color values or CSS color codes like #jre921. These do not seem to display correctly.

I am wondering how to properly use Tailwind and CSS color values with the color property of the ui.chip component?

Thank you for any suggestions!

[falkoschindler]

Hi @happybeginning1,

All three colors seem to work:

ui.chip('Quasar', color='red-5')
ui.chip('Tailwind', color='red-500')
ui.chip('CSS', color='#ff0000')

I don't understand what kind of color #jre921 should be. Usually color codes in hex format start with "#". But "jre921" is not a hex number.

[happybeginning1]

Hi @falkoschindler,

Thank you for your prompt reply. I tested the code snippets you provided, and they indeed work well. However, I've noticed an issue: when I add the .props('outline square') attribute to ui.chip, it appears that Tailwind and CSS color codes do not function correctly.

Additionally, I intended to use #jre921 as an example of a hex format color code, but I mistakenly wrote an invalid color value. Apologies for that mistake.

Thanks again for your assistance!

[falkoschindler]

Oh I see, the color parameter only works for changing the background color of filled chips. For the outline color we need to explicitly address the border:

ui.chip.default_props('outline')

ui.chip('Quasar', color='red-5')
ui.chip('Tailwind', color=None).classes('border-red-500 text-red-500')
ui.chip('CSS', color=None).classes('border-[#ff0000] text-[#ff0000]')

Note how we need to reset the color parameter to None in order to prevent the default color "primary" to take precedence. Alternatively we can enforce our colors using the ! prefix:

ui.chip.default_props('outline')

ui.chip('Quasar', color='red-5')
ui.chip('Tailwind').classes('!border-red-500 !text-red-500')
ui.chip('CSS').classes('!border-[#ff0000] !text-[#ff0000]')

[happybeginning1]

Hi @falkoschindler

Thanks for your solutions; they work perfectly. I really appreciate your help!!

I have another question for further guidance. When I add an icon to the ui.chip, it seems that the color of the icon does not match the text color. For example:

from nicegui import ui

text_color_of_chip = 'white'
color_of_chip = 'blue-500'

ui.chip('Text here', color=color_of_chip, text_color=text_color_of_chip, icon='o_looks_one').props('square')

ui.run()

How can I specifically set the color of the icon?

Thank you again for your assistance!

[falkoschindler]

Oh dear, coloring Quasar elements can be so tricky... 😕

The color "white" isn't recognized as Quasar color, because it isn't mentioned in the Quasar color palette. That's why NiceGUI uses a Tailwind class for the text color, which doesn't affect the icon. But you can explicitly use the Quasar prop "text-color" to set text and icon color to white:

ui.chip('Text here', color='blue-500', icon='o_looks_one').props('square text-color=white')

Maybe there's a better way to recognize Quasar colors. I'm open for suggestions.

[happybeginning1]

Hi @falkoschindler,

Thank you once again for your response. I agree, this issue is quite tricky🥶🥶🥶, and I appreciate your patience and step-by-step guidance. I have now implemented the style settings I wanted, and here is the final code for future reference in case someone else might need it:

from nicegui import ui

with ui.row():
        
    border_color_of_chip_type1 = 'border-green-600'
    text_color_of_chip_type1 = 'text-green-600'
    ui.chip('Chip One', icon='vaccines', color=None).classes(f'{border_color_of_chip_type1} {text_color_of_chip_type1}').props(f'outline square text-color={text_color_of_chip_type1}')
    
    bg_color_of_chip_type2 = '#3e6a94'
    text_color_of_chip_type2 = 'stone-200'
    ui.chip('Chip Two', icon='o_looks_two', color=bg_color_of_chip_type2, text_color=text_color_of_chip_type2, on_click=lambda: ui.notify('Clicked')).props(f'square text-color={text_color_of_chip_type2}')

ui.run()

Have a nice day!😎😎😎