Modern CSS with Tailwind Book Club!

Hi all,

Nice to see this book club going forward! I was and still am eager to read the book, but the flu got me into bed last week. Managed to load the book on my e-reader, just to go back to sleep. Reading while having a short-term memory of less than a minute is ill-advised. And reviewing the book with a bad mood won’t do my opinion any good.

So let me just post my “Introduction”


Why interested in Tailwind?

Prelude

Being a developer with great interest in UX (I studied it) I have more CSS-skills than most developers. My first website was structured using HTML tables, then came CSS floats and ‘recently’ flex-box and grid. So I am mostly comfortable with just CSS. At times, it can be challenging though.

CSS is hard so let’s use…

I always found it interesting how many developers invest time in 10 languages, but forget the most universal one on the internet: CSS. Just like Javascript, every browser ships with an engine capable of using it. And even when you can write perfect code in X, when not being able to show-off on the web it’s not gonna sell*.

It makes me a bit sad to hear CSS is hard from people who only watched 3 Youtube videos, 5 blog posts and gave up on it. They wouldn’t give up on another language as soon as their first logic mistake would make it cripple.

CSS is like a text book for children: learn letters (meh) → learn words (meh) → learn contextual meaning (nice!). The first steps don’t get you anywhere let alone a dopamine shot to get you exited and carry on learning. However, once you finished all steps, you can be an independent writer and publisher!

Over the decades we have seen many CSS component frameworks and a few utility frameworks to make it easier to style websites. The component frameworks come down to a set of classes so you don’t have to write from scratch. Those are comic books:

A CSS Component framework is like a comic book for children: view pages (nice!), view boxes (event better!), learn sentences (or not). The first steps are already rewarding! Once you completed your journey, you can copy paste sentences from other books as you know the text belong to whatever is in en drawing.

And then we have the utility frameworks. Some are almost languages on their own with conventions, syntax and tooling. The learning curve is told to be better than ‘native’ CSS:

A CSS utility framework is like a icon wall for children: learn icons (meh), combine icons (yeah)! You don’t know any letters, but you can explain yourself by pointing at pictures. Your expression is limited by the icons made available though. It’s okey because you got your dopamine shots! Once you master it, you can express yourself with unique combinations of available icons.

Back to Tailwind

Tailwind is is a utility framework, and once again with the promise to solve anything. It got a hype, Phoenix ships with it…so maybe this time it is the solution…?

  1. does it actually solve anything?
  2. can’t it be solved with native CSS?
  3. how does it scale?
  4. how to keep your app consistent?
  5. …or is it just Javascript guys reinventing the wheel once again because they could not easily use styles in JS. You know, because copying ‘line-height: 1.75rem’ from the browser inspector into JSX won’t work.

I see some club members have already been started; how is the rest doing?

  • some of my libs actually got more used due to having a properly styled demo page…yep, docs don’t count in the first 2 minuters of attention.
6 Likes