Fork me on GitHub
#biff
<
2023-01-05
>
pavlosmelissinos09:01:19

https://clojurians.slack.com/archives/C013Y4VG20J/p1652635321017259?thread_ts=1652603196.594249&amp;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

👀 2
Jacob O'Bryant17:01:53

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

👍 2
Jacob O'Bryant17:01:07

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

Jacob O'Bryant17:01:02

(`text-red` is a bad example; should've been e.g. text-red-600)

pavlosmelissinos22:01:53

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.

👌 2
macrobartfast01:01:28

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/

👀 2
🙏 2
Jacob O'Bryant03:01:16

I've actually bought that! only read a few sections so far though. I'll give you my review once I finish it 🙂

🙂 4
macrobartfast03:01:40

Actually, once you read it, just theme my site for me instead.

macrobartfast03:01:58

I’ve been told I need to learn to delegate.

🎅 2
Jacob O'Bryant03:01:37

I'd be happy to, I'll send you the contract 😉

😅 2
😄 2
pavlosmelissinos12:01:33

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 🙂

👀 2
Jacob O'Bryant17:01:19

oh that's good to know!

Epidiah Ravachol20:01:58

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.)

😄 4
loganrios05:01:12

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 😬

pavlosmelissinos08:01:03

Haha, thanks for the heads up but I think I'm safe, I already know I'm terrible at it 😉

Epidiah Ravachol14:01:35

I do like a book with a little danger in it.

macrobartfast20:01:19

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.

👀 2
😲 2