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

Show HN: Tailwind.run – An Online Playground for Tailwind CSS

tailwind.run

Post reply on HN
Print view View original

51–60 of 97 posts

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#51

Post by spectramax »

CSS has one major drawback - that is, there is no way to compose more complex objects from basic ones.

Say, I have a class:

  foo {
     color: #FF0000;
  }
I want to now apply this class to another class:

   bar(foo) {
      background-color: #000000;
   }
I want to be able to inherit from foo, but I can't do that and that's why we have these shenanigans of composable UI frameworks... there are some advantages to doing everything in the HTML but now we have repeating patterns in the HTML, such as in the OP's link

    Tutorials
    Plugins
    Features
    Blog
which is not extensible and creates duplicate code. You'd still have duplicate class names but I just have to change it once in the css instead of N different places in HTML.

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#52

Post by cuddlecake »

spectramax wrote: post #51

CSS has one major drawback - that is, there is no way to compose more complex objects from basic ones. Say, I have a class: foo { color: #FF0000; } I want to now apply this class to another class: bar(foo) { background-color: #000000; } I want to be able to inherit from foo, but I can't do that and that's why we have these shenanigans of composable UI frameworks... there are some advantages to doing everything in the…

TailwindCSS does have that:

https://tailwindcss.com/docs/extracting-components

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#53

Post by [deleted] »

spectramax wrote: post #51

CSS has one major drawback - that is, there is no way to compose more complex objects from basic ones. Say, I have a class: foo { color: #FF0000; } I want to now apply this class to another class: bar(foo) { background-color: #000000; } I want to be able to inherit from foo, but I can't do that and that's why we have these shenanigans of composable UI frameworks... there are some advantages to doing everything in the…

[deleted]

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#54

Post by cygned »

The major selling point from my point of view, and the reason why I switched from Tachyons, are components. With that, one can easily compose styles.

  .btn {
    @apply cursor-pointer bg-blue border-blue-darker text-white;
  }
When developing a web app, this allows you to have a central style configuration and reusability.

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#56

Post by icxa »

recursive wrote: post #55

I can't tell from this what Tailwind actually is, or how to use it.

"A utility-first CSS framework for rapidly building custom designs."

It's an excellent description in of it's own, but if I were to attempt to put it in other terms, it allows you to compose css components and classes out of other smaller, essentially one liner css classes, while maintaining a consistent styling and spacing across the different utilities, which you define up front using the config but also comes with good defaults out of the box.

It is excellent and now my preferred method for hacking up a new site. It also helps you think about your design system overall so now I find myself paying attention to things up front I would normally wouldn't and it ends up saving me time in the long run. It also pairs really well with the excellent Refactoring UI book.

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#57

Post by meerita »

Taiwind is nice.

For those interested in Functional CSS, I've made a Scss/Sass framework too, with different approach. https://github.com/meerita/utilcss here is the article related http://minid.net/2019/04/07/the-css-utilitarian-methodology/

Once you start using funcional CSS, you don't want to go back.

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#58

Post by hisnameisjimmy »

danchristian wrote: post #46
Etheryte wrote: post #37

While semantic styling has been around for quite a while in different shapes and forms, this is essentially the same as inlining all of your styles in a style attribute on every element, albeit just a bit shorter to write. It's an interesting idea to entertain as a thought, and some utility classes certainly hold value in general, but I don't see how you would ever reasonably want to use this in a project. It has all…

I think you have misunderstood the implementation. If you want all buttons to have a bit more padding then you either change the padding class on each button from .p-1 to .p-2 or, more likely with something like buttons, you abstract the styles into a .button class and then you can make a singular change to the padding and it will affect all your buttons.

The first one is a find and replace nightmare on any sufficiently large project and akin to inline styling. The second negates the point of utility classes.

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#59

Post by holler »

meerita wrote: post #57

Taiwind is nice. For those interested in Functional CSS, I've made a Scss/Sass framework too, with different approach. https://github.com/meerita/utilcss here is the article related http://minid.net/2019/04/07/the-css-utilitarian-methodology/ Once you start using funcional CSS, you don't want to go back.

> We have been programming CSS for a long time wrong.

Have we though? I firmly disagree with the premise. I agree that like anything else, css can be abused and misused, and the example cited of Newspapers fits the narrative perfectly. I've worked at a major regional Newspaper in the past and their website was one of the worst sites I've seen. The lead developer at that time (10 years ago) switched to using a functional/semantic css pattern much like tailwind/UCSS, and I found it to be terrible.

Any experienced FE developer should and will know css, whereas they will not know some random css framework dsl, nor should they have to learn it.

Most modern js frameworks are moving towards web-components and scope css to a component, which eliminates much of the past structural ambiguity and reasons for seeing e.g. !important (if implemented properly).

The argument about file size is not strong imo. You are trading css file size for html file size. How many modern web apps are slow due to their css file size? I doubt many. The Newspaper websites were always slow due to churn & many people touching the code, often with lower experience, leading to spaghetti.

If it works for a team then more power to them, but I'm sticking with css :)

Re: Show HN: Tailwind.run – An Online Playground for Tailwind CSS

#60

Post by meerita »

holler wrote: post #59
meerita wrote: post #57

Taiwind is nice. For those interested in Functional CSS, I've made a Scss/Sass framework too, with different approach. https://github.com/meerita/utilcss here is the article related http://minid.net/2019/04/07/the-css-utilitarian-methodology/ Once you start using funcional CSS, you don't want to go back.

> We have been programming CSS for a long time wrong. Have we though? I firmly disagree with the premise. I agree that like anything else, css can be abused and misused, and the example cited of Newspapers fits the narrative perfectly. I've worked at a major regional Newspaper in the past and their website was one of the worst sites I've seen. The lead developer at that time (10 years ago) switched to using a functio…

Hi, yes, the premise is a bit sensationalist. But any FE experienced will not work for too long on the projects. The projects I've surveyed and work for, changed personnel all the time. I didn't choose the projects to fit my narrative, I did it because most projects die within 5-10 years. Few projects live longer than that, and newspapers are great example for the research. The codebase is really hard to maintain as business grows. That's why I firmly believe, it is not the developer, it's the metodologies they use: they force you to do technical debt, bad arquitectures, etc.

Of course functional CSS is not the solution to all, there are situations where, componetize everything will make more sense. But the more you work on, the more useful you see it becomes.

The file size is strong for one reason: most connections to CSS resources are blocked by the queue of priorities, HTML files are downloaded between 12ms-100ms range and that means it's already done, plus, if you use reactive HTML, things speed up even more. Most of the CSS made with BEM or other metodologies don't end up with that much HTML saving too, they're quite verbose. You cannot control the verbosity since it's human made. With UCSS or other funcional frameworks, you can control the verbosity of the outputs, etc.

Post reply on HN