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

41–50 of 97 posts

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

#41

Post by jasim »

dinkleberg wrote: post #39

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 us…

There is no good way to solve it using Tailwind classes alone. You could parse the markup first and add Tailwind classes before rendering them, but that is too much pain for very little reward.

The best trade-off I've found is to give a unique CSS classname for the container which has user-generated content, and then style it using nested selectors. Here you can use Tailwind's @apply so you're still able to rely on Tailwind's design system.

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

#42

Post by yagodragon »

dinkleberg wrote: post #39

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 us…

Do you have any tutorial on how to set up Django with tailwindcss (using Django templates)? I'm new to Django and somewhat confused when it comes to integrating modern front end tools.

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

#43

Post by thijsvandien »

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…

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 changes are that your button is already defined in one place. Otherwise you can extract your own button class.

Also see my reply to bbmario.

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

#44

Post by cuddlecake »

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…

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 classes[0].

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

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

#45

Post by peternicky »

I played around with tailwind on a small project and found it more difficult than I expected. I think part of the problem is that when using tailwind or other similar frameworks, the conceptual model and workflow is different and requires some cognitive overhead to use effectively and efficiently.

Perhaps one day I will try again but personally I want to minimize extra stuff to learn, especially related to css and styling.

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

#46

Post by danchristian »

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.

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

#47

Post by Tomte »

thijsvandien wrote: post #43
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…

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 to include.

(I realize that's a niche use of those frameworks)

Oh, and if I may dream, https://caniuse.com/#feat=css-apply-rule throughout all browsers would be great!

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

#48

Post by dinkleberg »

yagodragon wrote: post #42
dinkleberg wrote: post #39

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 us…

Do you have any tutorial on how to set up Django with tailwindcss (using Django templates)? I'm new to Django and somewhat confused when it comes to integrating modern front end tools.

Yeah so someone actually made a Django app for it: https://github.com/timonweb/django-tailwind

I've used it and it is easy to use. It will generate a base.html file for you which pulls the built css from the static directory and you can extend that in your templates.

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

#49

Post by dinkleberg »

jasim wrote: post #41
dinkleberg wrote: post #39

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 us…

There is no good way to solve it using Tailwind classes alone. You could parse the markup first and add Tailwind classes before rendering them, but that is too much pain for very little reward. The best trade-off I've found is to give a unique CSS classname for the container which has user-generated content, and then style it using nested selectors. Here you can use Tailwind's @apply so you're still able to rely on T…

Yeah I definitely considered the parsing method, but that is definitely too much work there.

I didn't consider using the @apply, good idea. I'll have to give that a go, thanks!

Post reply on HN