Step 2 - Layout Changes
So texts are all over the places, so I need the first pass to replace all the
column with it Tailwind aware semantics.
@apply seemed to be friendly to me in this. I kept the class names intact and used some
@apply magic to compose Tailwind classes to make the UI structure feel somewhat decent.
Cards are also pretty structured in Bulma, and I assume in any API it would look similar. So I smelled another
@apply worthy feature, at least ostensibly. So I went ahead and did that too, I used a composition of titles like
has-text-centered is-title is-5 even in Bulma land (sort of what I’m going to do in Tailwind, there was a universal Find/Replace that saved me to create a
The final thing looks like this:
I think in working with Tailwind, one needs to take dual approach- macro and micro. When thinking big, and making a big chunk of content presentable, one can go for
@apply on some soon-to-be-discardable classes and make the things (temporarily) structured, later once the author is fluent enough with the UI, replace it with more articulated classes. The micro approach is the opposite, isolate a particular UI component, and experiment with combining utility classes, and once satisfied, keep it, and move on to a next UI component. Once the author is comfortable with the experience, things could be
@apply-ed, resembling the first approach, and making it more articulate with experience. Things converge towards a semantically sound system through experimentation from both ends.
Again, I am learning things and thinking out loud, maybe I am going the wrong way, and will correct my ways. I am not even fluent in CSS, far from it, it’s all in the name of learning and good fun!
I will go watch (and be more disappointed) by Love, Death and Robot now and be back later with more.
UPDATE: Relevant chapter on this for the book, Chapter 6! Which was actually the first chapter I read! But during development, I mostly consulted the documentation of Tailwind.
Reaction: The Tailwind code examples in the wild is super messy in the eyes! Not sure if it’s due to inexperience though.