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

81–90 of 97 posts

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

#81

Post by cuddlecake »

wishinghand wrote: post #63
cuddlecake wrote: post #44

Earlier quoted context omitted.

TailwindCSS can be abused to resemble inline styles, but part of TailwindCSS is the fact that you have some sort of design system you can quickly set up and build upon. For example, I could define a color called "primary" and use it anywhere without caring what the actual color is. Furthermore, styled buttons are such a common occurrence that TailwindCSS encourages users to extract common CSS patterns into component…

Extracting components? You mean like writing CSS classes? I'm so glad Tailwind is here to reinvent the wheel for us.

Well, you do write CSS classes, but those classes are based on your configuration. This is not a reinvention, it's a framework addressing certain issues in a certain way. It might seem counterintuitive at first, but to me it's a tool. I prefer it over SCSS (since I often rebuild in SCSS what TailwindCSS provides)

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

#82

Post by earthboundkid »

Tomte wrote: post #47
thijsvandien wrote: post #43

Earlier quoted context omitted.

Inline styles (AFAIK) cannot be made responsive, are a pain to override given their high precedence, and do not provide any constraints—Tailwind is a design system too. From a size perspective, compression takes care of the repetition pretty well. Utility classes allow for better reuse, meaning the overall page often is, in fact, lighter. Nowadays most pages are put together using some kind of components anyway, so c…

Even if compression is the solution for most users, I would love to have a generator on the web site where I can click on "blue" and "orange" (because that's my color scheme and my site will never use teal), not click on "forms", "buttons" and "hover", and I get a quasi-minimal version of the CSS file. My smallish sites don't use build pipelines and post-generators and so on, I'd just like a reasonably-sized CSS file…

I’ve actually been really enjoying using Hugo with PostCSS for static sites. You can run PurgeCSS automatically and have it remove all the unused crap from a CSS framework. Suddenly, it’s only 40KB for a full design system.

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

#84

Post by meerita »

ivanhoe wrote: post #75
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.

One question about this approach: If I understand correctly, if I have some text that is bold, and later I want to change it into italic, I have to go into templates, locate all instances of the text and rename all the classes from font-weight--bold to font-style--italic? Seems like "quick to build, but hard to maintain" approach?

Before I answer, do you want to change a particular module, particular text or you want to change site-wide things?

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

#85

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…

One quick extra note about the argument of file size. Those who argument about "more html size" never thought people has to download a huge CSS file for 2 o 3 pageviews. With the current state of the web, the trade off isn't that painful, in fact, you will see that projects done with React, Vue or similar the trade off is a bargain you cannot avoid.

HTML is faster, by default, as I state in the article. It's the first document and it's the first one processed. If you have a CSS file of 10kb gziped your chances will be huge in comparison with the averaga ~160kb of some projects.

The problem with inline-css (how the modern js framework are handling) is that clashes with the responsive world and cannot be preprocessed so easily as other projects.

Besides the file size factor, give a check to the other points in the arguments: amount of rules slows the loading speed, rendering and painting, etc.

You're sticking to CSS, we also stick too :)

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

#86

Post by meerita »

ivanhoe wrote: post #75
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.

One question about this approach: If I understand correctly, if I have some text that is bold, and later I want to change it into italic, I have to go into templates, locate all instances of the text and rename all the classes from font-weight--bold to font-style--italic? Seems like "quick to build, but hard to maintain" approach?

The approach is like programing with inline-css but using classes. Once you start working, you will realize you will reuse more classes and your code will be 100% redeable. Anyone coming behind your work can easily work it. Otherwise he needs to re-learn all the architectural tidbits and change it to his way to architecture it.

This doesn't stop you to code small and repetitive components like "buttons". There's an article where you can see how it works.

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

#87

Post by sideproject »

Been really productive using Tailwind myself. Recently re-launched my SideProjectors site (https://www.sideprojectors.com) and was able to get my CSS developed very fast. I have most of Tailwind classes in my head now, so I hardly look up their site for references. Being able to quickly edit the UI without much thinking is very refreshing.

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

#88

Post by ivanhoe »

meerita wrote: post #84
ivanhoe wrote: post #75

Earlier quoted context omitted.

One question about this approach: If I understand correctly, if I have some text that is bold, and later I want to change it into italic, I have to go into templates, locate all instances of the text and rename all the classes from font-weight--bold to font-style--italic? Seems like "quick to build, but hard to maintain" approach?

Before I answer, do you want to change a particular module, particular text or you want to change site-wide things?

Let's for starter say that we need to change something site-wide?

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

#89

Post by adamwathan »

Etheryte wrote: post #74
mattferderer wrote: post #67

Earlier quoted context omitted.

The first thought everyone has when seeing it is what you described, including myself. I suggest trying it out & reading more about it. It's the only way utility CSS frameworks like this seem to click. In my opinion, Tailwind works best when being used to create template components. In your button case you would just modify your reusable button component or the reusable base button component if you have multiple butt…

You get all of those benefits without any of the downsides by using any other modern styling solution, for example scoped styles and scss. The arguments against this solution far outweigh the arguments for it. You're free to disagree, of course.

Scoped styles and SCSS do not prevent you from having to come up with unnecessary names for things like utilities do. That's the main benefit in my opinion. Wasting brain cycles to name arbitrary wrapper divs that only exist to be a target for layout styles things like ".image-card-content-wrapper" is a completely unnecessary step in the UI development process.

Using utility classes to build a UI is much more like building something with SwiftUI, where no one seems to argue about this silly "separation of concerns" thing we talk about on the web.

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

#90

Post by Etheryte »

adamwathan wrote: post #89
Etheryte wrote: post #74

Earlier quoted context omitted.

You get all of those benefits without any of the downsides by using any other modern styling solution, for example scoped styles and scss. The arguments against this solution far outweigh the arguments for it. You're free to disagree, of course.

Scoped styles and SCSS do not prevent you from having to come up with unnecessary names for things like utilities do. That's the main benefit in my opinion. Wasting brain cycles to name arbitrary wrapper divs that only exist to be a target for layout styles things like ".image-card-content-wrapper" is a completely unnecessary step in the UI development process. Using utility classes to build a UI is much more like bu…

Using SCSS and using some utility classes isn't in any way mutually exclusive. If anything, it's a lot easier to mix and match. The argument isn't against having utility classes/mixins/extensions in general, but against relying on them solely.

I'm still not convinced — using only utility classes has very clear downsides, while using what's reasonably one of the most common approaches in the industry right now avoids those downsides while also providing additional benefits.

Post reply on HN