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.

Dear readers,

Although I do love discussing all the things we are about to read, let’s not get ahead of it please. The reason why we read this book is because we want to acquire knowledge! As a result we might post ‘dumb’ questions while we are at chapter 1.

The list with questions I posted was not supposed to be answered by anyone other than the book

So please, let’s stop discussing the grand scheme of things for now; we can do so later when everyone had read the book.

Disclaimer
This is my review of chapter #1. I am a Tailwind noob and still in the predicted “ugh”-phase and this review will likely reflect so.

Chapter 1: Getting Started with Tailwind

Tailwind uses a CLI to extract class names that you use in your code which match certain Tailwind patterns and generates CSS for you based on those findings. It’s does so fairly naive, not checking if the ‘pattern’ is actually used for CSS. My text about m-4 would trigger the inclusion of .m-4 { margin: 1rem;}. The book calls it “set up to run fast” and “not try and guess”.

This seems a bit hacky to me and the authors seems to know the audience as he defends this behaviour (Note the British spelling!) in the next two paragraphs. However, to me, “try and guess” is not the only option for being fast. Treesitter is fast and knows what is what without “try and guess” so what Tailwind does is taking shortcuts / skipping hard parts. And Tailwind class names being “odd enough” and “a few extra accidental classes don’t matter” are not the best point to be made. Even if true, it feels like the author is defending a weak point of Tailwind (CLI) a bit too much.

Adding Tailwind too Your App.

It comes with the disclaimer that this section might be outdated soon, but still it’s good a general overview is provided. It does the job of showing what bolts are needed and is easily adaptable to not React/Webpack apps.

At the end Tailwind modifiers are mentioned and where to place them in the import CSS. As I am still unknown about modifiers, it confuses me a bit as I have no use for that info at the time.

Quick Start

This one got me dazzled and not in a good way. It starts with some very simple HTML which it expanded in the next iteration. Somehow, a class="flex" sneaks in with the second iteration without being mentioned at all. However, that’s only the start. In the next iteration the author really adds some styling to the example saying “The Tailwind classes I’m using do a pretty good job of representing my intend”.

It might be just me, but I see no mapping between intent and the classes at all. “flex” is no intend and how is “order-last” a good representation of “put the logo to the right”? It’s simply the same as with normal CSS: you have your intend and have to figure out how to get to it. Tailwind is doing nothing over CSS in the given example. It then continues to add more classes -which feel like shorthand inline CSS- to the example.

ps. margin: 1rem; padding: 1rem is closer to intend then m-4 p-4 when you want a margin and a padding of 1rem.

Just to finish it off it ends with “but the process didn’t involve us putting a Tailwind class in and being surprised that it affected something on the page we weren’t expecting.” No, no unexpected cascade(!) results but neither would someone have those with inline CSS.

Conclusion chapter 1

This chapter did not convince me in any way. It felt a bit “some things are not good but they are still good cause it doesn’t matter”. It also takes the argument against CSS that is gives unexpected results, but does so with stuff CSS will do just as fine without

• installation procedure
• need of a fast parser
• maybe some accidental extra classes

How about the other readers?
@blakedietz
@kevinschweikert
@Lume
@maxmannen
@AndyL
@bdarla
@BigTom
@dch
@stefanchrobot
@victorbjorklund
@w0rd-driven

Did they feel the same way about this chapter? Did I miss something important in this chapter which might change my opinion on it? Let me know!