Can you create a minimal reproducible example?

I tried to make minimal example, but still haven't managed to do so. My current efforts make me think it may be something to do with forwardRef. I have attached sample react component which is similar in principle to the real one I am having problems with. (two versions). I obviously don't understand how to use from cljs. I either get Invalid hook error or 'Expected something callable' from reagent. I have tried using it with ':>' and ':f>'

No clue, sorry.

> class names are correct. In spite of it, button doesn’t render a background color That's what the right side of the dev tools is for. It has all the styles applied to the component being inspected, including styles that were superseded by others with higher priority. If your class name is there, then the color was superseded - you can check by what. If your class is not there, then the browser simply doesn't know about it. Probably the right CSS was not loaded.

Also, the hover:something class names sound as if they are not class names but a combination of the :hover selector with a class name. If so, you can't really use it like that. But I could be wrong - Tailwind could create special rules for the :hover selector with all the possible hover:something classes.

If I hardcode a color in the button-styles function, it works, so I think it’s not being superseded :thinking_face: . Is there a possibility that for some reason the evaluation of the color variable doesn’t arrive on time for the css to be properly injected?

hover:bg-red-500 is correct according to tailwind class names.

If you hard-code something in :style, it gets the highest priority so it supersedes anything.

CSS has no timing - if you change CSS after the fact, the new results will still be visible.

True, i get your point. going to investigate what’s happening there :thinking_face: Is join a good approach to mix the strings with a ” ” ?

And you said it yourself - you do see the right class in the Elements inspector. So the CLJS code is working. Meaning, something is wrong with the CSS.

If you're using Reagent, just use reagent.core/class-names - then you can use strings, keywords, nils. So code like this becomes possible:

(r/class-names [:a (when b? :b) "c"])

(r/class-names [:a] [:b :c])

It's possible you have some purgecss process which is removing the tailwind css you want, you're not supposed to do (str “bg” foo) because then purgecss (or whatever) doesn't know you are using that class. https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

Ooh, that explains a lot. After removing join and str and using r/class-names problems went away :thumbsup:

also, for future reference as you may come across this gotcha when working with classes in reagent...

[:div.bg-yellow-300  ;; <-- this takes precedence
 {:class "bg-red-300"}
 123123
 ]

Prohint: don't use shortcuts such as :div.my-class or :div#my-id. :) It's easy, but there are three major downsides: • The implicit precedence mentioned above • Needs to be rewritten into a proper map when you need to toggle some class in runtime (and you will eventually need to do that) • Impossible to use proper keyword search - you will have to use an inferior text search Another downside which depends upon your editor - it will now offer to autocomplete not only :div, but also all the divs with all the classes and IDs. It's definitely a downside when you have hundreds of combinations.

Thanks for all your valuable input everyone. It’s so good to meet a community like this one. Loving it. ❤️

@U2FRKM4TW do you know where i can find other examples of r/class-names being used? looks interesting

Not sure about the examples, but you can just go through its source code, it's rather trivial.

Hey folks. For everyone finding this issue I’d just discovered we don’t need r/class-names. Passing {:class [“hardcoded class names” variable-class-name1 variable-class-name2]} does the job.

What I mean with this is that a space is added in-between the strings.

@U023KKYKZNE ☝️

Oh, even to [:> some-react-component ...]? Sweet!

oh good catch! what about conditionals? (when x? variable-class-name1) works in between it?

If :class [...] works then yes, that should work as well, since it seems that Reagent uses class-names for all components.

Need to test it. I’ll be back here soon 🐱

Apparently reagent docs state it works https://github.com/reagent-project/reagent/blob/master/doc/UsingHiccupToDescribeHTML.md, but as I’m still a clojur’noob I’m having problems with it lol.

(defn button
  [{:keys [label color]}]
  [:button {:class ["text-white font-semibold px-2 py-1 rounded-sm shadow-sm"
                    (if color (join " " [(str "bg-" color "-500") (str "hover:bg-" color "-600")]) "bg-purple-800 hover:bg-purple-900")]
            :on-click #(js/console.log "click click")} label])

This worked for me ☝️

But I believe there must be a better way to write it than join and string… not sure.

You can use two ifs or one into with a single if:

(into [:class1 :class2]
  (if x?
    [:x1 :x2]
    [:y1 :y2]))

Doubt: in this code example we’re gathering the result of the if with [:class1 :class2]. But why do you use keywords :class1 :class2 if class-names are strings?!? :thinking_face:

Is :class1 just a way of representing any variable?

r/class-names converts keywords to strings.

ooh I see! :thumbsup:

> (reagent.core/class-names [:class1 :class2 nil :class4])
"class1 class2 class4"

Coming back here to share this concern about using dynamic values with tailwind 😞 https://tailwindcss.com/docs/just-in-time-mode#known-limitations. Check the Dynamic values section where it says one shouldn’t use string concatenation to create class names 😞

but that’s not what you’re doing? we use tailwind too and i’ve been using this fine

{:class ["p-4 mt-2" (if(dark? "bg-black" "bg-white")]}

That’s fine, what’s not so fine is

{:class [(str "bg-" color "-500")] }

But since I’ve updated tailwind to the most recent versions it’s working :thinking_face: