Show HN: Tailwind.run – An Online Playground for Tailwind CSS • Hacker News Board

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

#71

Post by toastercat » Fri, Aug 09, 2019, 8:23 PM UTC

Awesome, might just give Tailwind a shot finally. Thanks for the great work. I typically use https://basscss.com/, but been meaning to checkout larger Atomic CSS frameworks like Tailwind and Tachyons.

Aside from the benefits of "functional CSS" that others have mentioned, one thing I really love about it is I don't have to constantly be looking up CSS rules or properties; I just reference the docs of whatever framework I'm using to get what I want. You might say I could do this with Bootstrap as well -- and yeah, I can, but I much prefer the piece-meal approach of atomic CSS. The times I've used Bootstrap, I found myself fighting their styles constantly, or giving up and resulting with a site that looks like every other Bootstrap page.

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

#72

Post by weego » Fri, Aug 09, 2019, 8:30 PM UTC

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…

No we've been trying to turn CSS into programming for too long and doing ridiculous things that other domains wouldn't tolerate like encoding structural annotations in string names (BEM) and endlessly trying to genericise things that are similar only by coincidence or forced coercion which is the obsession of functional CSS "frameworks"

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

#73

Post by jazoom » Fri, Aug 09, 2019, 8:59 PM UTC

Tomte wrote: post #36

jazoom wrote: post #34

Earlier quoted context omitted.

I've been using NodeJS for about 5 years and have never seen the init usage you're talking about. `npm init` initialises your new project. At least I think that's the case, because I've never run that command. I just create a package.json file myself. Also, I use yarn instead of npm. But of course, because change, there is now a new way to use init that you just alerted me to. It sure seems like an unnecessary compli…

I read the first part of your comment and thought "okay, I expected that I probably misunderstood the init thing". Nothing to feel bad about, as I said, I'm an outsider, but still annoying to get it wrong in my comment. And then I read the second part and am simply astonished. I wasn't wrong? I just happened to stumble upon a quirk that changed recently? That's something.

I think the trick to using the NodeJS/webdev ecosystem is to ignore most of what goes on and to keep one ear barely listening in case something truly useful comes along.

...and update packages with caution. SemVer doesn't always save you and neither will static analysis (because there really isn't any).

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

#74

Post by Etheryte » Fri, Aug 09, 2019, 9:36 PM UTC

mattferderer wrote: post #67

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…

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.

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

#75

Post by ivanhoe » Fri, Aug 09, 2019, 9:41 PM UTC

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?

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

#76

Post by blorenz » Fri, Aug 09, 2019, 9:51 PM UTC

Very nice! I'm hoping that this can be a catalog and discovery tool in the future where we can showcase Tailwind components. Looking forward to it!

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

#77

Post by dlwdlw » Fri, Aug 09, 2019, 10:58 PM UTC

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’ve seen this issue at many “engineering” focused companies where many people write their own DSLs. for CSS in particular there are many people who just hate it and come up with many ways to not write it.

CSS however is very much like drawing rather than engineering. Some aspects are just not scalable. You can draw many things in vector by conbining shapes for example but a pen or pencil is still very necessary for many parts of both exploratory creation as well as something polished.

The same goes for HTML and Javascript to an extent. While it’s great to build railroad tracks, you can’t take a train everywhere... any abstraction has to also have the ability to easily break out of it to handle edge cases. Clean and Pure abstractions almost never have the grittiness necessary to reflect a fractally complex problem.

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

#78

Post by adamwathan » Fri, Aug 09, 2019, 11:52 PM UTC

dinkleberg wrote: post #64

iandinwoodie wrote: post #61

Earlier quoted context omitted.

I solved this issue for myself last night using CSS selectors. My goal was to replicate Github Flavored Markdown styling using Tailwind on Hugo generated html. Here is the repo for the stylesheet for anyone who is interested: https://github.com/iandinwoodie/github-markdown-tailwindcss The generated content is wrapped in a div with the class "markdown" (defined in the repo above). So it looks like: {{ .Content }} I wr…

Very cool, thanks for sharing the link. I think this is how I'll do it as well.

Creator of Tailwind here, that's exactly what I would recommend too.

Here are the markdown styles for my own personal website for example:

https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7...

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

#79

Post by dillondoyle » Sat, Aug 10, 2019, 12:44 AM UTC

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…

What's the most recent info on large inline css for page speed? Google used to say not to inline everything [1], for size/dupes, and CSP issues.

1: https://developers.google.com/speed/docs/insights/OptimizeCS...

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

#80

Post by thrownaway954 » Sat, Aug 10, 2019, 2:09 AM UTC

That are some bloated classes. it's no different in inline styling everything to me. I really don't see the benefit in doing it this way. Can you use tailwinds and scss to create actual styling rules? No that is something I could get behind.