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!
