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

31–40 of 97 posts

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

#31

Post by thijsvandien »

bbmario wrote: post #17

I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!

This comes up in every thread regarding Tailwind or similar frameworks/methodologies. If you're interested in the rationale, I recommend searching for some of those and reading the comments there.

The TLDR is that you don't lose anything by starting out this way, because at any point you can extract (think @apply) higher level utilities or semantic classes, but gain that you can get a good looking design in place quickly by having useful constraints, not needing to switch context all the time, and not being forced to make up names for everything. While few sites need to conform to the "Zen Garden principle", Tailwind won't stop them from doing so, if you put in the work that it makes optional.

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

#32

Post by leeoniya »

Tomte wrote: post #14
adriansky wrote: post #7

This is awesome! I started using Tailwind for a project. I was a concern with the relatively big size of the framework on a landing page[1]. Then I used purgeCss to only leave the css classes that I used and remove all others. That solved the size issue. [1] https://uxeranalytics.com/

Is there any purgecss equivalent, that is a local tool and is not node.js? I've recently searched for that and only found a defunct Ruby gem. Does the Golang world have nothing like that?

shameless plug: https://github.com/leeoniya/dropcss

it's still written in JS but there is nothing node-specific there. it easily runs in a browser, or any js environment.

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

#33

Post by jszymborski »

bbmario wrote: post #17

I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!

There is indeed a place between semantic styling, and specifying everything down to the colour of an element with styles.

I'd agree this seemingly takes the idea of semantic styling to an extreme (although I haven't gone too deep into the framework).

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

#34

Post by jazoom »

Tomte wrote: post #18
dpacmittal wrote: post #15

Earlier quoted context omitted.

Why not nodejs? Just curious

Because it's yet another full ecosystem with lots of dependencies where I have zero knowledge and experience. For example, all those packages say "npm install packagename" to install, but it didn't work for me. It seems I have to (sometimes?) do a "npm init" first. No install instructions ever tell you that. I'm sure when you're in the ecosystem, that's a given. For me it's hurdle after hurdle. That's why I named Go…

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 complication. I recommend using yarn, by the way.

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

#35

Post by lauritzsh »

KevinNTH wrote: post #6

Awesome project. I am a big fan of Tailwind CSS to and I use it for my current project [1]. I will definitely make use of Tailwind.run() to as a playground to design components! Great job! [1] https://gekri.com

Your project is a bit similar to mine and I am very curious about how you use Blockstack.

I have been hosting a CouchDB instance myself on a VPN but considered moving to Firebase while prototyping since it seems easier to use. Considering Firebase since it offers offline-first support. However, only today I was made aware of Blockstack and I have seen it mentioned multiple places.

How do you like working with Blockstack and what made you choose it? Does your app work offline? Does it synchronize automatically between devices?

I also want to take data privacy very seriously, since I am dealing with personal and sensitive data (just like a person's journal is very sensitive to them).

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

#36

Post by Tomte »

jazoom wrote: post #34
Tomte wrote: post #18

Earlier quoted context omitted.

Because it's yet another full ecosystem with lots of dependencies where I have zero knowledge and experience. For example, all those packages say "npm install packagename" to install, but it didn't work for me. It seems I have to (sometimes?) do a "npm init" first. No install instructions ever tell you that. I'm sure when you're in the ecosystem, that's a given. For me it's hurdle after hurdle. That's why I named Go…

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.

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

#37

Post by Etheryte »

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 same drawbacks as writing inline styles on elements, not to mention the large size.

Say you have a number of views and decide (or a client decides) you want all of the buttons to have a bit more padding. If anything else happens to completely accidentally also use the same padding class you're always left with manually checking every single instance just for a small change like this.

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

#38

Post by Tomte »

leeoniya wrote: post #32
Tomte wrote: post #14

Earlier quoted context omitted.

Is there any purgecss equivalent, that is a local tool and is not node.js? I've recently searched for that and only found a defunct Ruby gem. Does the Golang world have nothing like that?

shameless plug: https://github.com/leeoniya/dropcss it's still written in JS but there is nothing node-specific there. it easily runs in a browser, or any js environment.

Thanks a lot! It looks good.

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

#39

Post by dinkleberg »

I'm absolutely loving using Tailwind for my new projects. It makes it so easy to prototype and build out nice designs. Honestly I have never felt so productive when it comes to designing pages.

There is however one thing that prevents me from using it for everything and I'm curious if anyone knows a solution for this. If I am pulling a chunk of rich text from a CMS/backend/whatever, how can I style this?

I tend to use Django for my backend, so in my template files I just put in a chunk like {{ body }}. If that chunk has h2,p, etc. none of those are getting styled.

In normal css I could just define what those h2, p, etc look like under a specific class. But besides using some js magic to inject those classes, I'm at a loss.

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

#40

Post by jasim »

bbmario wrote: post #17

I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!

Tailwind makes it very easy to change theme by changing just a single configuration file: https://tailwindcss.com/#designed-to-be-customized

It is very liberating to use Tailwind instead of creating unique CSS classes for every div in a page. The code is much more maintainable - in a single stroke Tailwind gets rid of selector specificity issues, design inconsistency, and naming woes.

From a programming perspective, the conventional style of "semantic" CSS classes creates deep and fragile coupling between markup and CSS. It goes against everything good code is supposed to be - when you change the structure of the HTML you're forced to change the CSS, and if you truly use the power of CSS selectors, then modifying CSS becomes a difficult enterprise: one change can create multiple unrelated changes at a distance.

Tailwind solves all this, with just two downsides: until you spend a few hours mucking with it, the markup look will look unwieldy, and you have to be ready to really think about semantic CSS and "separation of concerns" dogma we've taken for granted for so long.

Post reply on HN