Hey all, I am excited! We are currently started using Tailwind in our first bigger project, and I’m eager to learn more about it! Thanks @AstonJ for organizing the book club!

You’re welcome Kevin!

I had a few spares minutes last night so read the intro. It seems Tailwind’s selling points are:

• You spend less time writing CSS
• You don’t really use CSS classes (such as button)
• Instead you use utility classes that map to css, eg m-4 gives you margin: 1rem or text-lg gives you font-size: 1.125rem
• You can however group a collection of classes for easy reuse, and Tailwind provides an @apply directive for this, however it’s recommended that you use features of your programming language or framework to manage this.

Interesting!

The immediate thought that comes to mind is that you’ll be repeating things - a lot - so every time you want to use something you’ll need to repeat all those utility classes, eg:

<button​ class="bg-green-500 text-white font-bold​ py-3 px-4 rounded-lg text-center">​
  Click Me​ 
</button>

Instead of:

<button class="button is-primary">Click Me</button>

Be interesting to see how easy @apply is and how Phoenix helps manage it all.

Look forward to hearing what you all think as you work your way through the book!

I bought a print copy of that book and read most of it.

I think I know enough about CSS already where a “cookbook” style book would benefit me more.

These few sentences get me most of where I need to be:

• It’s like Bootstrap utility classes, but it’s all utility classes.
• The JIT compiler reads your source code and spits out CSS based on the classes it saw.
• Components make it DRY.

So I think I would benefit more from “here’s how to do a common paradigm in Tailwind.”

I think it’s a good book, I’m just not the target audience maybe. I like things like “Elixir for Programmers” (Is that a thing? If not it should be!)

I am working on a project that uses Phoenix as a backend with some administrator functions using liveview and Sveltekit as frontend. I have used Tailwind before but have not learned so much about it, more “copy and paste” from other sources and adjust it for my purpose.
I also picked up the recommendation not to use @apply. In Svelte trying to make js-file with exported string constants that I import in my components. I will try the same in Phoenix.

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.

I will look forward to hearing what you think Bart!

Btw for anyone interested in getting up to speed with CSS, an article popped up on DT recently which might be worth a read

I don’t believe the recomendation is to avoid @apply completely, but rather to prefer using components/partials to componentise an application. @apply is handy when the abstraction cannot be acheived with components.

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.

Good idea Bart

I’ve split the discussion into a dedicated thread and moved it here: https://forum.elixirforum.com/t/general-tailwind-discussion-split-from-book-club-thread/53726 (it’ll remain open for a month after the last reply, so people are more than welcome to join or carry on the discussion there if they like - just don’t forget to be nice )

Hi, everyone, unfortunately I’m a bit busy this month, so I won’t be able to focus on it as much as I’d like =/
but I started it last weekend.

Even though I had heard about Tailwind, I had never used it or read the docs

So I’m taking the club as a opportunity to see how it works and what I can achieve with it.

At the introductory chapter I felt the way the author said I would “ugh” hahaha
Honestly I don’t really like that big amount of classes
I was expecting something more like bootstrap maybe…

Then I moved on to the first chapter, I followed the examples, and I might say I changed my mind a bit, I started to get the “feel of it”
It’s kind cool to add classes instead of writing css rules on the components, however I feel this might get messy if I wanna keep a pattern through the whole system.
Well, I guess there’s probably a solution for this.

Waiting for the weekend to continue it =)