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

61–70 of 97 posts

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

#61

Post by iandinwoodie »

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…

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 wrapped up the stylesheet around 2AM this morning, but I plan on expanding the README and un-nesting the class (it was nested for postcss-nesting).

I am just starting a personal site and it is still very much under construction, but I do have a Markdown example page publicly available that I have been using to test the styles. Here is the link in case anyone wants to take a look at the end result: https://iandinwoodie.github.io/blog/markdown-syntax-guide/

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

#62

Post by antonkm »

hisnameisjimmy wrote: post #58
danchristian wrote: post #46

Earlier quoted context omitted.

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.

No, it does not. They're not exclusive. I've written large pages that pretty much only used component classes for pills and buttons, with Tailwind using @apply. All the other elements used utilities. Paired with purge-css you get small CSS bundles and really quick styling.

You'd often use something like a component based JS framework or a server rendered templating language, making it easy to contain all utilities with shared logic in one place.

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

#63

Post by wishinghand »

cuddlecake wrote: post #44
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…

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

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

#64

Post by dinkleberg »

iandinwoodie wrote: post #61
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…

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.

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

#65

Post by emn13 »

jasim wrote: post #40
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,…

Bit of a tangent, but perhaps the issue with separation of concerns isn't so much that it's a bad idea, it's that it's not always a good idea; and secondly that css doesn't really enable separation of concerns like that. It's a fine idea to be able to give (essentially) a style a meaningful name, but only if you know what the meaning is and probably only if you intend to use it several times. Since CSS cannot really create complex styles from scratch meaning that you need wrappers and separators and whatnot as purely style elements, true encapsulation that's easy to use without knowing the implementation isn't really feasible.

Hence "separation of concerns" - to the extent that it's a good idea in the first place - doesn't work for html+css, and similar concerns mean it doesn't work very well for html+scripts.

Put another way, leaky abstractions are worse than no abstractions. Better to keep things transparent and merely expose helpers, instead of pretending you can hide complexity when you cannot really hide it.

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

#66

Post by antonkm »

yoz-y wrote: post #25
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!

Yeah at a first glance this looks like putting style in html except by using classes rather than `style` attribute. Cool for prototyping I guess.

I've found that since using Tailwind I've got a deeper understanding of CSS, got a greater understanding of UI design (Adam Wathan's tutorials are great) and produce and replicate designs quicker and easier.

It's a design system with constraints, which automatically gives me fewer and better options.

Using something like Bootstrap is probably easier and quicker if you're unfamiliar with writing CSS though.

All in all, quite far from styling with inline `style` (but it takes a bit of learning on the thought process behind it).

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

#67

Post by mattferderer »

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 button components.

You get the best of all worlds.

* You avoid writing a lot of CSS.

* You don't have to worry about thinking of CSS class names or name pollution

* I find it faster & easier to style components with a utility CSS framework in something like Storybook than it is with CSS.

* I recommend adding a plugin to your editor to help with the names of Tailwinds classes. VS Code has a couple that will suggest the right class name based on what you type.

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

#68

Post by qudat »

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…

From a performance point-of-view, it's not the same at all. Also this is a design system, not just a set of utility functions. You can also abstract common components and reuse them.

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

#69

Post by andrei_says_ »

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…

It is useful for component design as it removes the need to name things and then reference them.

It is similar to inline styles in how atomic it is but provides responsive classes which adapt to screen sizes.

It also provides predefined defaults for sizes and colors to prevent codebase rot and design inconsistencies.

Allows combining framework classes into nameable classes (requires using their building tool).

As someone who uses scss and know css myself I will not use it but I can see how it can be useful for devs who don’t want to learn css.

I just can’t get over the inefficiency of learning all their styles and typing them as classes feels gross compared to BEM. But I get it.

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

#70

Post by no_wizard »

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…

This spec unfortunately does not appear to be alive and well.

https://tabatkins.github.io/specs/css-apply-rule/ https://www.xanthir.com/b4o00

Post reply on HN