Clojurians Log v2

for tailwind in general I'd recommend letting it process the build output, not the sources

if babel is going to rewrite the code this is also necessary, since it'll have no idea how to rewrite CLJS code

OK but how do I get the class into the build output?

I have tried the following iterations:

[:> rn/Text {:style "text-green-500"} "Hello!"]
[:> rn/Text {:class "text-green-500"} "Hello!"]
[:> rn/Text {:className "text-green-500"} "Hello!"]
[:> rn/Text {:class-name"text-green-500"} "Hello!"]

I added "./app/*.js" to my tailwind config but that isn't doing much either. that is where the JS build output lives

sorry I don't know how nativewind operates. I assumed it did the same as regular tailwind but that doesn't appear to be the case

so it likely won't recognize the code cljs generates

Oh sad 😞 I did see a cool https://www.juxt.pro/blog/clojurescript-native-apps-2021/ saying that it was easier to write the logic in cljs and the components in JavaScript so I might do that, but I wanted to try writing it in Cljs first so I can judge for myself

Might also spend more time getting https://github.com/vadimdemedes/tailwind-rn to work

Thanks for your help! I am a newb in clojurescript and would have probably spent an inordinate amount of time coming to the conclusion that you’ve just provided me

I think the only thing you can't do is use the babel plugin to automatically wrap your components in styled

Got it, thanks. Do I need a tailwind job running on a watch basis?

I tried to wrap my components as per the Tailwind instruction but got errors for using the wrong kind of RN components

(def StyledText (styled rn/Text))

what was the error you got?

I am away from the cljs project rn but I got something like “text must be inside a Text component” from Expo

OK. Still not sure sure if it would work, but I think removing babel would be my first step and troubleshooting from there

I’ll try!

Thanks for your help

I got it working! I had to remove the babel plugin and configure a postcss config file

https://medium.com/@nnnsadeh/how-to-integrate-tailwind-into-your-react-native-clojurescript-expo-app-61bf97afd6b9

you can use the clj-kondo analysis to find dead re-frame subscriptions etc The keywords analysis has additional data about in which context they are used. it has support for re-frame. https://github.com/clj-kondo/clj-kondo/tree/master/analysis#context-data

Thank you I'll look into it

I would keep this section handy (provided you're using shadow-cljs): https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages. I would give ["styled-components/native$default" :as scn] a try.

Ok, I tried that, yet I wasn’t able to do scn/View.

Thanks though, I didn’t know about the $default import suffix.

In the source for that project you linked the import is merely "styled-components", but I didn't have any luck with that myself. I looked over the repo for styled-components but couldn't find anything illuminating.

I may have found the answer to my original question with one line from the project docs:

...
- any react component, which will invoke styled on the component:


(defn my-component [props]
  (dom/div {:className (goog.object/get props "className")}
      (goog.object/get props "children")))

(defstyled example2 my-component {:border "1px solid"}).