Modern CSS with Tailwind Book Club!

Phoenix Forum Chat / Discussions
, , ,
27

Took a break from work, so let’s continue the tour where I left off :slight_smile:

I notice I should not judge the book by it’s cover, and I don’t. But I do judge the book by Tailwind. This is not fair to the book and the author. So here comes the disclaimer:

The chapters are a great resource of information and explanation.
It’s just Tailwind that kinda bugs me at the moment. So this is the last post before I do a “read everything, review once”. I guess this book isn’t a great fit for a chapter by chapter post.

@apply (…continuation)
Most of this section explains how layers work and why the layers are important so @layers might have been it’s own section. But that is nitpicking. The book has made clear to me how Tailwind uses the directives and that is what matters. As someone else already mentioned the book does not make clear where to put those which is a miss.

But then the monkey comes out of the sleeve [1]. It is acknowledged that going all wild with @apply and @layer causes you to build your own little framework and taking upon yourself the naming and maintenance. If only I had read this acknowledgement before my mood became sarcastic the other day! I could’ve skipped some pessimism about the @apply directive. And then it directs me to use components instead of apply. Ow dear, it really is a threadmill!

The book continues with the modifiers. They were briefly mentioned before and enabled “super power inline styling”. They sure look problem solving: happy to meet :slight_smile:.

CSS Units:
Really enjoyed this section! Some historical explanation (about CSS), deeper details and a runner up for Chapter 3: Typography. I would want to write a whole chapter about this to show I can be a very happy person, but then I would spoil it all.

Typography

While reading this chapter I begin to see value in a simple naming scheme, which is said to be offered by Tailwind. A few font schemes are explained and demonstrated. It’s not much over just inline styling but it looks a low cleaner in my code.

But can anyone explain me why it is font-bold and italic instead of font-italic? I understand from a CSS mapping point of view but I rather would stay within the ‘namespace’ so the guessing would be easier.

Boxing

Once again the book does it’s job of explaining the available classes, options and modifiers. When needed the examples are demonstrated with graphics which is very nice.

But once again I get struck by Tailwind-ism:

So padding is done with p{side}-{size} and border with border-{side}-{size}. Mind the dash. Why Tailwind? I really want to like you. And having mt-auto has no effect according to the book so why include it in the first place? Would have been nicer to just “do what I want” regardless of the underlying CSS. It’s almost as if they use a CSSproperties-to-Classnames generator sometimes.

The author does mention it in the book which is a pre. This also happens with the bottom-left-top (mind the {horizontal}-{vertical} instead of the other way around). It is mentioned, but no explanation is given. Not that is matters for those wanting to use Tailwind…but for those pessimistic it would’ve been nice if the Tailwind author could explain his choice here in a sideblock.

I get the feeling the book author shares some criticism with me in this chapter. Although I am in the position to be more vocal about it.

Book conclusion so far

  • The book does a great job of explaining everything there is to know about Tailwind and basic (but more than most know) CSS.
  • This book targets the developers not knowing much about CSS at all. It therefor explains everything CSS can do, but by using Tailwind class names. Those look less intimidating but I doubt this is the way to go.
  • For those having CSS-skills already the amount of explanation of what-does-what is a bit much as most things in the book (so far) are 1-on-1 mapping with a short syntax class name s-stx-cn. For those people the currently missing explanations would be nice to have.

[1] As you might have thought, there is no monkey coming out of your sleeve. This Dutch idiom is used when the truth is revealed about a situation or someone.

@blakedietz @Lume @AndyL @bdarla @BigTom @dch @stefanchrobot @victorbjorklund @w0rd-driven

I wonder if you guys already started and maybe have a different experience / opinion than I have!

1 Like
28

I went through and saw all the old archived book club threads. Definitely interested in jumping in! I have the book and will be contributing my thoughts periodically as someone very familiar with CSS and brand new to Tailwind.

2 Likes
29

Still reading! I am jumping all around the chapters after my needs but my focus is now on chapter 4 and the box.

1 Like
30

I still need to organize my thoughts but I feel like there are things that could been pushed to and appendix and just cover one example in detail per concept.

I also been going through a tailwind css book by sitepoint that I like.

1 Like
31

Hi all!
I’m a newly-minted bootcamp grad (full stack web dev) enamored with (hypnotized by?) Elixir. Would this be a good reference to help me get up to speed and attempt to start using an Elixir-based stack? Or would you recommend focusing on learning other skills first to build a foundation before moving to a book like this? Currently, I am maybe 10% through a dozen different intro resources
:joy: :stuck_out_tongue: (Honestly, I don’t even mind the proliferation because the multiple perspectives are helping! )

1 Like
32

I wouldn’t say Tailwind is the place to start in terms of learning Elixir. It’s more about learning Tailwind’s styling nomenclature so you can build out nice looking pages without much headache.

2 Likes
33

So I did spend some time with Phoenix and Tailwind. And Tailwind does grow on me; although I doubt I would use it in a large code base.

  • But all those time I haven’t touched the book to find something I read it before. The web is simply faster to find the answers I need. A large part of the book is “dictionary” which is a bit useless nowadays.
  • I do recall some “aha” moments in the later chapters of the book. So there’s that.

All in all the book did not enjoy me as much as I hoped. For people new to CSS, the book might be a fun first dive though.

2 Likes