Step 1.1 Setting up Tailwind
I used this link to setup Tailwind. This commit has this. I also read the book on this chapter but this being a LiveView project I needed a more tailored tutorial. I did use the example given in the book to try out moving and enlarging some titles on the card, they worked (I didn’t commit them because they don’t look good in my particular case).
Interesting things, I went all heroic and modern and what not and decided to NOT use the @4.2 while installing css-loader (The article recommends it, the book doesn’t concern itself with css-loader in its introductory chapter), and was yelled at by the compiler through error messages, using version 4.2 helped. I’m in too much of a hurry to afford not knowing why.
Another thing, VS Code is showing Unknown at rule @tailwindscss(unknownAtRules) on @tailwind directive and while my OCD makes me want to fix it, I can afford not caring for today at least. It’s inconsequential.
So, it works, I brought back my theme.scss and colors.scss and removed Bulma specific variables. Awesome! I can see the font changing and the overall UI changing.
I am not a designer, I am not even design-minded, so it’s more than expected that whatever I do here will suck. Hopefully, it will be better than the first screenshot, since I have matured compared to a year ago (or I’d like to think). But I will not hurt any readers eyes with sharing screenshots at each stage unless there is a noteworthy design change or an aha moment! This time, it just knows Tailwind classes, nothing more, so no screenshots 