Anyone not using Tailwind in a Phoenix project?

Phoenix Forum Chat / Discussions
,
76

Tailwind is crafted for use with components, so component name would replace CSS class name.

.button-primary → <.button color=“primary”>
.heading → <.heading>

As a result your templates are not riddled with classes, as most “look how bad” examples show.

That being said: if you do “cleanup” the code by using components, you end up shimming all HTML elements. Hence native HTML elements such as h1 etc don’t have styling in Tailwind (without plugin Typography)! You are supposed to (inside) ‘component’ them :confused:

So no <div classes=“a thousand classes for this container containing the main content”> but <.main_content>

Wait, did we just shift from “ow no a central CSS file and having to come up with class names” to “a zillion components at no default places and having to come up with components names”?

Update:
In this thread my opinions (multiple!) while reading the book.

I see I agree with myself from the past:

For React 3, components are created (in the book) : Header, SubHeader and SubSubHeader. The next example uses a plain JS function named title to return a list of ultility classes. Let’s apply those to H6: SubSubSubSubSubHeader and subSubSubSubSubTitle()! Guess we are back at “naming things is hard”.

and

What I’ve learned so far:

  • The solution to prevent duplication requires you to come up with names.
  • Creating components/partials can cause code with weird syntax AND you still need to come up with those names.
  • When all gets ugly, you can use @apply…just know you will have to…come up with some names.

I feel like we are going in circles, just so Tailwind can get away with “duplication is not an issue” and “with Tailwind you don’t have to come up with names for your shared CSS properties.

Glad those names are not CSS names cause those were really hard to come up with according to Tailwind :wink:

and

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. [..] So padding is done with p{side}-{size} and border with border-{side}-{size}. Mind the dash. Why Tailwind?

Not using Tailwind daily, I still fail to pick the proper prefix text- or font- or none at all, and have to learn all the new ‘naming conventions’ (read: is there consistency at all?)

That being said: I use it in all my lib demo apps.

6 Likes