[CSS] Highlight resultItem doesn't support utility classes

[JuanCrg90]

• [x] Describe the bug I'm using tailwind in my application, I tried to use a utility class to change the highlight color of the result items but the default highlight is applied directly to mark so the utility class is set but not applied because mark styles have bigger precedence

• [x] To Reproduce

You can test the bug in the following codepen you only need to search a word and see that the default color is shown on the highlight instead of the blue utility class set on the JS https://codepen.io/JuanCrg90/pen/qBmKZZy

• [x] Expected behavior Blue utility class should be applied

• [x] Screenshots or GIF's (optional, but HIGHLY RECOMMENDED)

• [x] Additional context (optional) I think we could add a default class to the mark tag that is added if the user doesn't specify a custom class instead of set the styles directly to the tag

[folknor]

Just adding a default class to the mark tag is not going to help.

The issue here is about CSS specificity; https://polypane.app/css-specificity-calculator/#selector=.autoComplete_wrapper%20%3E%20ul%20%3E%20li%20%3E%20mark

https://polypane.app/css-specificity-calculator/#selector=.text-blue-200

So if you make the CSS code like this

.autoComplete_wrapper .text-blue-200 {
    ...
}

It will have a specificity of 0.2.0, which is higher than the other two; https://polypane.app/css-specificity-calculator/#selector=.autoComplete_wrapper%20.text-blue-200

[JuanCrg90]

Just adding a default class to the mark tag is not going to help.

The issue here is about CSS specificity; https://polypane.app/css-specificity-calculator/#selector=.autoComplete_wrapper%20%3E%20ul%20%3E%20li%20%3E%20mark

https://polypane.app/css-specificity-calculator/#selector=.text-blue-200

So if you make the CSS code like this

.autoComplete_wrapper .text-blue-200 {
    ...
}

It will have a specificity of 0.2.0, which is higher than the other two; https://polypane.app/css-specificity-calculator/#selector=.autoComplete_wrapper%20.text-blue-200

---

The detail with the solution that you mention is that you need to create a new custom class in your project. The idea of using Tailwind utility classes is not adding new classes to customize the UI

[folknor]

I know. But I don't know a better solution.

[JuanCrg90]

I have added a PR with a proposal for this scenario https://github.com/TarekRaafat/autoComplete.js/pull/265

[TarekRaafat]

Hello @JuanCrg90,

Please correct me if I misunderstood, you're using the autoComplete.js native stylesheet along with Tailwind.

If that's correct, why would you still want to use the native stylesheet if you're already relying on Tailwind for styling?

If you have your own use case, you can still change the highlight class already as shown in the docs.

I'll be awaiting your kind feedback, cheers! :)

[JuanCrg90]

Hi @TarekRaafat, currently, if you try to use a utility class the native stylesheet ignores the style because is not a specific class for the selector, you can see the example on the codepens listed here https://github.com/TarekRaafat/autoComplete.js/pull/265

[folknor]

Another solution is you simply copy the example CSS out of autoComplete.js and just change the selectors to suit your needs. I do that in all my projects.

EDIT: In other words, I never include the CSS that ships with autoComplete.js.