This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-01-05
Channels
- # announcements (1)
- # babashka (61)
- # babashka-sci-dev (1)
- # beginners (54)
- # biff (17)
- # cider (4)
- # circleci (1)
- # clj-commons (39)
- # clj-kondo (26)
- # cljdoc (40)
- # clojure (41)
- # clojure-europe (32)
- # clojure-norway (4)
- # clojure-portugal (1)
- # clojure-uk (2)
- # clojurescript (59)
- # clr (69)
- # conjure (7)
- # cursive (22)
- # data-science (16)
- # datalevin (1)
- # datomic (19)
- # docker (31)
- # funcool (1)
- # honeysql (6)
- # hoplon (1)
- # hyperfiddle (41)
- # introduce-yourself (1)
- # juxt (2)
- # leiningen (5)
- # nbb (14)
- # nextjournal (38)
- # off-topic (47)
- # polylith (2)
- # rdf (5)
- # re-frame (4)
- # reitit (27)
- # releases (6)
- # scittle (10)
- # shadow-cljs (24)
- # sql (11)
- # squint (1)
- # tools-build (33)
- # tree-sitter (4)
- # vim (39)
https://clojurians.slack.com/archives/C013Y4VG20J/p1652635321017259?thread_ts=1652603196.594249&cid=C013Y4VG20J Having issues with css because of this 😞 I'll work around it but, generally speaking, if this is considered bad practice, is there a better way to use tailwind classes dynamically in biff? e.g. how would you implement a button that randomly changes its background color every time you click it? edit: Sorry for the slightly off-topic question, the problem isn't caused by biff but since tailwind's the default css library, I thought maybe biff has a solution regardless of that
no worries!
you'll be fine as long as all the classes you want to use are in the source code somewhere. in that example, you could add a comment like ;; text-red
tailwind just goes through your source files using some regexes to find anything that might be a tailwind class, and uses the result to know which classes should be in your generated css file
(`text-red` is a bad example; should've been e.g. text-red-600
)
Thanks. I considered comments but decided they are kinda hacky and brittle (I'd have to add a "do not delete" disclaimer, hoping that my future self would pay attention to it 😛) for my taste... I rewrote that part of the app after all to not be dynamic. After thinking a bit about it, I'm kind of running out of excuses for supporting dynamic css classes. I'm starting to believe that they are an anti-pattern. Educational projects are one thing but in a production app you'd probably want to have a consistent theme all-around, i.e. a specific color palette.
I certainly haven’t sprung for it… but the landing page for Tailwind CSS always prominently features this book, which seems to be a lot about theming: https://www.refactoringui.com/
I've actually bought that! only read a few sections so far though. I'll give you my review once I finish it 🙂
Actually, once you read it, just theme my site for me instead.
As it turns out, tailwind provides a mechanism to support classes that the regex can't discover: https://tailwindcss.com/docs/content-configuration#safelisting-classes The book looks awesome btw. I'll consider getting it, thanks 🙂
oh that's good to know!
The regular expression patterns and the variants parts of the safelist are exactly what I needed to give users the ability to subject the site to their own garish color schemes. (As opposed to my chosen garish color scheme.)
A warning: I used to think I was doing okay at web design (for not having formal training), and then I bought Refactoring UI last week, and now cannot stop cringing at the look and feel of all my projects 😬
Haha, thanks for the heads up but I think I'm safe, I already know I'm terrible at it 😉
I do like a book with a little danger in it.
FWIW, there are also videos from one of the authors of the book online on his own channel… here is an example: https://www.youtube.com/watch?v=1HDR-AV4ODU and another (not on his channel): https://www.youtube.com/watch?v=7Z9rrryIOC4 The second video has a nice table of contents in the description. It is an amazing talk, actually. Apparently I don’t need half the things I put into a UI.