search

teknql / shadow-cljs-tailwind-jit

Shadow build hooks for enabling JIT compilation of Tailwind CSS
95 stars 10 forks source link

Dynamic values don't work #7

Closed aidam38 closed 2 years ago

aidam38 commented 3 years ago

Hey, I couldn't manage to get dynamic values (e.g. "h-[720px]") to work.

I started with the https://github.com/fnumatic/reframe-starter template, which uses this repo, and then wrote

(defn main [] [:div {:class ["h-[720px]" "w-[320px]" "bg-black" "rounded-[60px]"]}])

Guidance much appreciated.

rschmukler commented 3 years ago

We make pretty extensive use of the arbitrary value support in the project that we use this for. I suspect this is a misconfiguration in the reframe starter application as opposed to this project. Specifically I'd look at the auto-generated postcss.config.js and tailwind.config.js in this project and compare it with the ones that are in the repository. It's also potentially possible that there's a bug in the newly landed custom config files functionality. If you aren't making use of any customization in those files, you could potentially delete them and see if that resolves your issue.

Lastly, you can check the styles tab of the browser dev tools to see whether the expected classes are in the generated stylesheet. I'd also reload (ie. just visit /resources/public/style.css or whatever) it to see whether its a live-reload thing that's broken

fnumatic commented 3 years ago

Hello @aidam38, did you find a solution to your problem? I can take a look if you have a link to a repo.

aidam38 commented 3 years ago

Hey, it kinda started working. Sometimes, I have to restart the shadow-cljs server and/or delete the generated .css file for new dynamic values to appear, but that's fine. Sorry if this wasn't a very helpful GH issue.

rschmukler commented 3 years ago

@aidam38 One thing of note is that you cannot dynamically construct classes with Tailwind, so be careful to make sure to avoid that. Feel free to ignore if you weren't. Eg.

;; Do
(case color
  :red "bg-red-500"
  :blue "bg-blue-500")

;; Do not
(str "bg-" (name color) "-500")
rschmukler commented 2 years ago

Closing this as presumably fixed. Please feel free to re-open if needed.