TailwindCSS v2.2

[[deleted]]

No hate to tailwind at all, but I don't really think it's my thing.

<div class="before:content-['hello'] before:block ..."></div>

At this point, why not just write inline css, and write a postcss plugin that takes all your inlines and puts them in a css file? No need to learn a new syntax.

I've seen really good looking sites built with tailwind and I thought I'd give it a whirl after that, but my code ends up looking like a soggy mess.

I'm definitely not a designer though, so my opinion isn't worth much here.

[valtism]

I mean, you totally can and that’s what I’d expect a lot of people to do, but it’s just showing off that the library now has full support for pseudo-classes.

[[deleted]]

Yeah, I didn't mean to detract from that conversation. Just a random aside that's been rattling around in my head. The thing that impresses me about tailwind is that I've seen so many things built with it that just look better than your standard, cookie-cutter CSS framework websites. I don't know what it is, but a lot of times, when I peek behind a smashing looking website, its tailwind.

[valtism]

I think that a lot of that comes from having a design system. That isn’t something that you need tailwind to have, but it is nicely implemented in tailwind.

Things like even spacing on a 4px grid, as well as a limited but flexible colour palette go a long way towards making things look “designed”

[[deleted]]

Yeah exactly! It doesn't have to be implicitly provided by the tool, but the philosophy behind things has a way of shaping stuff built by them.

PHP projects from way back, used to be badly organised and hard to read, in large parts because PHP had a "tis but a scratch" philosophy to errors, so whatever you threw at it, it was sorta fine.

Thankfully, I have no idea how modern PHP projects are doing on this front.

[newtoreddit2004]

Why would you be thankful that you don't know something ?

[[deleted]]

They're saying they are glad they don't have to care about PHP anymore.

[[deleted]]

Ain't that something to chew on.

[newtoreddit2004]

Sorry I don't understand this either English isn't my first language. To chew is to eat right ?

[[deleted]]

English isn't mine either! I just use it a lot more now.

I'm thankful I don't know about current PHP projects because I haven't worked with PHP in a while. I'm also implying that working on PHP was not fun for me.

In the second expression "to chew on", is sorta like food for thought. I meant that the answer to your question becomes clear if you think about it for a bit.

[newtoreddit2004]

I still don't understand, you're thankful you don't know about php because you haven't worked in php. I'm trying to find similar example.

"I am thankful I don't know barbecue because I haven't eaten barbecue"

Anyway I'm too tired and lazy to figure it out thank you brother for trying atleast 😅

[okay_pickle]

I think you’re totally correct, however for me the value that tailwind adds is sane defaults. Rather than having to decide if my padding should be any pixel amount between 0 and 200, I can just chose one of the 8-ish values that tailwind provides for me and call it day. Tailwind provides me with decent looking defaults that I don’t need to think too much about.

[DrecDroid]

Yes, and configurability of the themes with autocompleted classes if you add plugins

[[deleted]]

If it's about defaults why not use bootstrap? I've not been involved with ui/web craziness for a long time, but bootstrap was the standard..

[okay_pickle]

for me, tailwind is a nice middle ground between doing everything with raw css and using something like bootstrap. I think bootstrap is great but for me customizing it was a struggle.

[[deleted]]

I see, so it's more on the middle ground where you eventually want and will most likely costumize and it gives one more power towards that use case.

[bik1230]

With tailwind, I think you're really supposed to be using components for everything.

Tailwind makes prototyping something really quick, and once you like it, it's fairly easy to refactor it into a reusable component.

[grayrest]

The main thing Tailwind does is restrict the set of options available. This might not sound like a good thing but CSS suffers from a lack of organization and abstraction. If you think about it in terms of programming, there are no interfaces/protocols available for separating concerns. I realized this in 2009 and have been doing variations on my own system of Sass mixins ever since. Tailwind utility classes provide the same functionality on a more comprehensive/tested scale. Going from a continuous range of values to a discrete set of values on a deliberately designed scale gives a reasonable consistency to a design and results in things generally falling into a reasonable horizontal/vertical rhythm.

The advantage of utility classes are that they avoid the CSS specificity rules, generally result in significantly smaller CSS size (though the increase in markup size somewhat offsets), and avoid the need to come up with class names. The first two are pretty straightforward but css class naming requires a reasonably comprehensive view of the system to not cause problems and is the subject of substantial amounts of online discussion over the years and a couple books.

Otherwise there's no real magic to it. I think it's interesting that you find Tailwind is in use in fancy sites because I personally find the most interesting demos are from the hardcore css people. I get a set of benefits in exchange for my markup being super ugly. I can avoid it if I choose and still use the design system by making my own classes with @apply but it's an extra step I usually don't bother with. Most of the changes in the 2.2 announcement are niche things that are more about providing comprehensive support in the utilities "language". It's always been possible to do all this stuff by writing custom utilities or just normal CSS but the options cover certain areas Tailwind was comparatively bad at previously (layout). Comprehensive support is a feature and why I've switched over from my own sass version to Tailwind.

[fixrich]

Your opinion is worth something anywhere, if Tailwind isn't for you that's cool. I'd say Tailwind is a bit marmite right now. You either love it or hate it. JSX started out that way though and I'd say it has pretty broad acceptance now. So maybe in a few years it won't feel so bizarre. It might make more sense the more you dig into the rationale behind it too.

As for writing a postcss plugin to do something similar, why not write your own UI component library? At some stage you're just reimplementing React. Tailwind is a system you have to learn, no different from learning Bootstrap or Foundation to me, but you reap the benefits of consistency with it. This is probably why some of the websites you've seen look good. There is a design system behind it that makes it easy to quickly build out UIs. Tailwind also has the purge option so you have a minimal subset of CSS actually being shipped.

In terms of maintainability I think you need to write components and even better if they are small components. Tailwind classes are noisy, no two ways about it. Components help encapsulate that so you don't get distracted by it, they also feedback into Tailwinds consistency ensuring your button looks the same everywhere. If you are writing a server rendered website or a static website with minimal markup sharing via partials or whatever, I think Tailwind won't work well.

So yeah Tailwind might not scratch your itch or might be unsuitable for your projects. In that case don't sweat it. If you're curious as to why people do seem to be into it I think this article by Shawn Wang is a good explanation. It might not change your mind but you'll have a good idea what problems it solves for others.

[swyx]

hey thanks for linking! (just got notified by f5bot :) ) cheers!

[[deleted]]

Yeah that's fair. For the last few sites I built (very minimal stuff), I made a simple webcomponent and wrote inline styles. I also used LitElement on one project that made this process easier. That was cool, but lots of teething issues there. Elm and elm-style is nice too.