Fork me on GitHub
#clojurescript
<
2022-08-10
>
Jeff12:08:44

What’s the best way to set up clojurescript with tailwindcss?

rgm18:08:47

"Best" kind of depends what you're up to and your attitude towards JS tooling. If you're not customizing and just kicking the tires, you can always use the PlayCDN stylesheet and directly attach selectors like [:h1.p-4.font-bold "my bold padded header"] https://tailwindcss.com/docs/installation/play-cdn ... just thump the <script> tag into your host page. https://github.com/rgm/tailwind-hiccup (full disclosure, I started this lib) is mainly meant to help stack class names from within clj/cljs code and allow some light abstraction (eg. (tw [:p-4] some-other-vec-of-selectors {:class "non-tw-class"}) ;; => {:class "p-4 whatever was in the named vec non-tw-class"}, but doesn't really do much else. You'll need to use the regular tailwind CLI or postcss/purgecss to actually produce CSS files, and this can be finicky. https://github.com/wilkerlucio/tailwind-garden is there if CSS-in-JS via garden is your thing. IIRC Wilker has ported tailwind to garden, so you don't need the JS build process, you can just use the selectors. https://github.com/thheller/shadow-css is a new thing that I don't entirely understand but is worth a look. It seems a little more like stylefy or styled-components, where it's directly generating anonymous classes into the <head> while it's running. This isn't exhaustive; there's other stuff like https://github.com/lambdaisland/ornament that I don't know well. (I do find directly using Tailwind via the JS build process a little weird now that they've gone over to JIT generation by default. It used to be that you could just use a massive 8+MB CSS file for dev, but prune a production file with reference to your advanced-built cljs bundle. Now you have to point your dev tailwind watcher at all your dev cljs, but so it goes). I still do a lot of server-rendered work, so for me I try to keep it light and prefer not to go CSS-in-JS, since I don't have JS to generate styles on the server. I like my clojure to just generate class names, without being specific about how the browser knows what the class name means. The big value of Tailwind getting popular in my mind is providing a universal shorthand: .pb-1 means padding-bottom: 0.25rem; always, everywhere. The precise way in which the browser comes to know that is wildly variable, and will probably change a bunch of times over any given project.

Jeff12:08:06

Seeing quite a number of solutions not sure which one is the best for me

jpmonettas12:08:06

Hi everybody! FlowStorm Clojure and ClojureScript debugger 2.3.131 is out FlowStorm is a Clojure and ClojureScript debugger with some unique features. 2.3.131 includes new features : - New lazy and recursive value inspector (https://jpmonettas.github.io/flow-storm-debugger/user_guide.html#_value_inspector) - New tap tool to work with tap> (https://jpmonettas.github.io/flow-storm-debugger/user_guide.html#_taps_tool) - Support for light and dark themes, in selected or automatic mode. Checkout the user guide for more info. (thanks to Liverm0r!) - Thread tabs can be closed and reordered - New functions for shutting down the debugger gracefully (for using in state components) and a bunch of bug fixes. Github repo : https://github.com/jpmonettas/flow-storm-debugger/ User Guide https://jpmonettas.github.io/flow-storm-debugger/user_guide.html Show up in #flow-storm if you are interested in this kind of stuff. Cheers!

Jérémie Salvucci13:08:33

Hi, I'm using a docstring with this syntax @ param a-b foo (but without the space between @ and param). The error message I get is "Parse error. invalid param name "a-b"". I know that this a syntax error for the closure compiler because I'm not using {}. I tried to use some compiler options such as jscomp_off "nonStandardJsDocs" but it doesn't seem to work. Is there an option to remove this parsing?

Ted Ciafardini14:08:38

Is there a simple way to format an inst in clojurescript? Something like

(inst->date-str #inst "1985-04-12T23:20:50.52Z") => "April 12th, 1985"
I’ve started writing my own function but I was wondering if there’s a built-in conversion fn?

p-himik14:08:18

Almost what you want, in JS:

new Date().toLocaleDateString('en-US', {dateStyle: 'long'})
=> 'August 10, 2022'

👍 1
steveb8n23:08:29

Q: one of my consulting clients just asked me how he could start learning Clojure. Yay!. I’m trying to figure out the best way for him to self-teach. looking for recommendations…

steveb8n23:08:09

Ideally first steps are browser based without any installation e.g. http://kids.klipse.tech/

steveb8n23:08:53

What is the best browser based interactive tutorial that goes much deeper than the kids level? He’s already a developer so will fly through it quickly

steveb8n23:08:22

once he graduates from the browser I’ll probably get him setup with Babashka for his first repl

Alex Miller (Clojure team)23:08:34

the Calva getting started thing will open Calva (in the browser via gitpod) and a file of things to walk through in the connected repl

steveb8n23:08:15

I’ll leave him to try it out and see if he can get past the VS Code complexity. looks pretty nice