Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind CSS v3.0

tailwindcss.com

Post reply on HN
Print view View original

431–440 of 448 posts

Re: Tailwind CSS v3.0

#431

Post by iovrthoughtthis »

montroser wrote: post #379
reactor wrote: post #294

Earlier quoted context omitted.

How would you have done it without TailWind? You'd still have to create classes for each of them in plain css anyway, except it would probably be in a different .css file. The inherent complexity pertaining to your app is not taken away, it just moved the places.

My point is that plain CSS is already good at this. So then you don't need to make more components with their own interface to learn. Edit .btn { ...default button styles } .btn.large { font-size: larger; } .btn.shadow { box-shadow: 0 0 8px #0004; }

but now to understand what a single class might do to an elements style i have to check for ever possible combination .e.g

.btn.large {} .field.large {} .fieldgroup.large {} .title.large {} .link.large {} .large {}

to find all the elements that the .field.large declaration impacts we need to enumerate all the elements that have both .field and .large in any order.

we've coupled out html and css files

Re: Tailwind CSS v3.0

#432

Post by [deleted] »

Yzupnick wrote: post #409
dragonwriter wrote: post #372

Earlier quoted context omitted.

> ...but you modified the HTML? The original challenge includes questions that apply only if the resolution involves HTML modifications, which (contrary to the earlier text viewed in isolation) indicates that such modifications are not invalid in response to the challenge.

Yah, maybe I should have been explicit, but I think my HTML change as semantically important. (My interpretation of the last line of the challenge.)

[deleted]

Re: Tailwind CSS v3.0

#433

Post by iovrthoughtthis »

jeremyjh wrote: post #295
animal_spirits wrote: post #93

Earlier quoted context omitted.

Coming up with variable/class names is one of the most annoying aspects of programming, so any way we can eliminate that task I think is always going to be a productivity boom

Yes, communicating intent to other programmers and our future selves is hard, so let's not do it.

well, sometimes. yes.

the semantics of most html elements is useless to know for more devs (and classes don't help users)

in fact a class like .red conveys more useful information to a developer than .standout-link because when we go to change the colour of the button it's the colour we care about, not the "purpose" of the button

Re: Tailwind CSS v3.0

#434

Post by iovrthoughtthis »

the__alchemist wrote: post #304
marstall wrote: post #78

just got parachuted into a tailwind project. have to say I don't fully get it. the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo. For example, say I want to do something basic like "display:flex; justify-content: start". In tailwind you would type "flex justify-start" instead. Which doesn't really follow any rules as far as how to get from A to B, so it'…

Spot on. Whenever you add a DSL like this, you need to carefully weigh costs and benefits. A hidden downside is that every new person who views your code base (And you in the future!) has to become proficient with the DSL. The base tech it wraps (HTML + CSS) is more fundamental; less overhead. Another way of saying this, is that Tailwind adds cognitive overhead.

the classes you define become the new dsl though. so you keep the overhead of learning + the effort of writing and maintaing your own dsl

Re: Tailwind CSS v3.0

#435

Post by iovrthoughtthis »

734129837261 wrote: post #384
bschne wrote: post #353

For those wondering "but separation of concerns!" or "but code reuse!", the dev behind Tailwind wrote a post about his thinking around this, which IMO makes quite a lot of sense, a while back: https://adamwathan.me/css-utility-classes-and-separation-of-...

The problems he's tackling weren't problems, and his solutions are a bombardment of utility class names in your HTML, rendering it extremely and unnecessarily verbose. It makes the HTML less intuitive to read, too. A ` ` is clearly a container for a user profile, a ` ` tells you absolutely nothing about what the hell is going on. I fucking LOVE CSS and Tailwind is an insult to the craft. Those who love Tailwind tend…

but what does "user_profile" tell you, as a developer, when you need to style the element?

Re: Tailwind CSS v3.0

#436

Post by iovrthoughtthis »

runarberg wrote: post #95
rekoros wrote: post #36

Tailwind made it possible for me (backend developer) to write somewhat maintainable frontend code. It’s a joy to use both as a writer and reader.

There is a dead sibling comment which I will repeat with a bit kinder words, and with a different caveat. As a frontend developer I don’t like Tailwind for several reasons, it brings the styling into the structure. As a frontend developer Tailwind is at a forefront of what I would consider bad practice and encourages a code style which would be a nightmare for me to maintain. That said. Tailwind seems to be loved be…

do you prefer the structure in the styling or the styling in the structure?

i prefer the later. with styling in structure if i make a change in one place, it effects the one thing i intended it to

with structure in styling, if i change one thing, it may impact many other things, some of which i might not intend to and are sometimes unknowable at the time of the change

Re: Tailwind CSS v3.0

#437

Post by iovrthoughtthis »

jastr wrote: post #283
commanderkeen08 wrote: post #238

Every time Tailwind does something great and gets posted here, the conversation devolves into the same arguments: “I don’t get it. It’s just inline styles.” What is it about CSS that gets people so offended and opinionated? If it were a new JS framework, few people would be saying “I just don’t get XYZ. Use React”. Is it because Tailwind is so drastically different and breaks people’s core ideas about separation of c…

When you first hear Tailwind's concepts, they seem to contradict everything you know about good software design. When you try it out and begin to remember some of the class names, you get into a great state of flow - it's the high developers are always chasing. I can't help but feel that Tailwind detractors have never actually tried Tailwind or are too square to give it a chance.

i think we too easily fall for the heuristic of separate files == separate concerns

but your concerns arent really separate if, while in their separate files, they are concerned about the same things

and, so long as you want relative styling, they always will be. you can either (1) attach properties to your tree or (2) flatten your tree into a list of paths and attach properties to nodes that match the paths

in (1), changing the structure can only impact an individual node or it's children, only by the properties attached to the node and it's parents; changing the style can also only impact an individual node or its children

in (2), changing structure can impact the individual node, it's children, siblings or parents by any rules that now match any of the mentioned nodes; changing style will impact all matching nodes (not all of whom can be identified statically) and their children and may interact with other rules which apply properties to matching nodes.

either way, you cant escape the structure of the tree and one strategy lets you scope your changes easily, the other does not.

Re: Tailwind CSS v3.0

#438

Post by travisd »

adamwathan wrote: post #191
travisd wrote: post #59

I wonder what the future of code-splitting with Tailwind will be. With JIT and a large web app, it's easy to ship a massive CSS file even if 90% of the rules are unused on 90% of the pages.

Tailwind author here! Do you have an example of a site using the new engine that is shipping a massive CSS file where most of the styles are unused on most pages? The Tailwind website is only 36.9kB of CSS and it likely includes more classes than any other Tailwind site on the internet by virtue of the fact that it has to provide visual demos for so many of the classes. I don't think 36.9kB is massive personally, it'…

No, just a hypothetical concern more than anything. Thanks for the reply!

Re: Tailwind CSS v3.0

#439

Post by emptysea »

ereveles wrote: post #330
docmars wrote: post #298

Earlier quoted context omitted.

You can use both and gain the benefits of Tailwind-in-JS to dynamically apply utilities and arrays/objects of utilities composed together, all using a nifty wrapper library called "twin.macro". It sits on top of Styled Components or Emotion (your choice), and uses your project's Tailwind config faithfully, minus a few of the plugin features. It eliminates the need for JIT or PurgeCSS because it compiles Tailwind's ut…

+1, tried Tailwind and liked it, but when I found I was able to use CSS-in-JS with it with twin.macro i was amazed. Now is used on all my side projects.

I'm curious how that would work with typescript since it's adding extra props like `css` and `tw` to components which don't exist in the types

Re: Tailwind CSS v3.0

#440

Post by johnchristopher »

seanwilson wrote: post #418
freebreakfast wrote: post #263

Earlier quoted context omitted.

The discussion is not about the semantic expressiveness of HTML. There are certainly limitations, but these are limitations of HTML. The discussion is about whether or not "tag soup" (excessive HTML elements) is necessary for styling with modern CSS. I cannot think of an example of where it is. > Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way? I looked at…

Can you link to any complex designs you've worked on that only use semantic HTML elements and minimal divs/spans? Are you saying that any modern website that uses wrapper divs is from lack of expertise?

> Are you saying that any modern website that uses wrapper divs is from lack of expertise?

That's a loaded question. CSS frameworks (or tables, or div based designs) are also used because they save time when iterating, not because of a lack of expertise.

Post reply on HN