9 ms·

Show HN: Tailwind Button Playground

40 points by mcbetz 7y ago

mcbetz 7y ago
I built this small tool to create buttons with Tailwind. The buttons can have background and text colors, margins, paddings, rounded corners and shadow.
- wzy 7y ago
  Are you going to build one for every design element in Tailwind?
  - mcbetz 7y ago
    Good idea, any wishes?
    - adelarsq 7y ago
      Generate custom components, such ELM buttons already with CSS (https://package.elm-lang.org/packages/elm/html/latest/Html#button https://package.elm-lang.org/packages/elm/html/latest/Html#b...) in it =)
kingkool68 7y ago
I like being able to modify the properties and see the resulting classes.
- mcbetz 7y ago
  I would like to expand it so you can build whole components (like cards or navigations) and get the classes to copy them.
hmhrex 7y ago
I've been toying with the idea of using Tailwind (I currently use Bulma), but I'm concerned about it taking more dev time than necessary. Would love to hear people's experiences!
- sansnomme 7y ago
  It's a lot more maintainable than raw CSS but when you grow big you will have to refactor. The main thing about Tailwind is that the author is a very, very talented designer who also produces high quality YouTube tutorials. It's very easy to make Stripe-style landing page with Tailwind because all the examples are in that style. Most of your existing frameworks like Bootstrap, Bulma may look unique but when you want to ship a pretty page you will need severe customisation together with a fair bit of design talent. At the end of the day, you want your site to look beautiful, not just yet another wannabe-unique-glitzy-slightly-modified-themeforest site. https://youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ https://youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ His videos are worth their weight in gold even if you don't use Tailwind. From Figma design all the way to pixel perfection. You won't be able to find this level of expert knowledge on Udacity.
  - hmhrex 7y ago
    In what ways do you see refactoring becoming necessary down the road? Good to know about the videos. I'll definitely check them out.
    - sansnomme 7y ago
      Think React-style. A button becomes a component. Otherwise your page may look noisy with each element having 5-10 tags attached. https://tailwindcss.com/docs/extracting-components/ https://tailwindcss.com/docs/extracting-components/ You can either use their built-in system or whatever your JS framework provides or both.
- mhd 7y ago
  I did some experiments, after watching the quite helpful design videos by the two main developers, and it's been quite useful. Definitely best suited (or only suited?) to a component-based system, where the repetition is soon factored out. It's a bit hard to get a unified style going, especially if you don't get a thorough design document from someone who knows what they're doing -- but it's definitely doable, mostly because you don't attempt every minute px/em/ex variation on every border or padding, but you're restricted to a set of sizes and dimensions that fit well together. (Although, one of the developers still does fiddle too much in his videos to adjust to the Figma blueprint) And easy enough to customize with the built-in tool, if you e.g. want to omit certain styles, add some distances yourself or have your own palette.
keb_ 7y ago
This is awesome! I recently switched to Tailwind from using Basscss in my projects, and am excited at the ecosystem and amount of support around Tailwind. Tools like this make it easier to introduce newcomers as well.
jtth 7y ago
The contrast button doesn’t work when the background is set to transparent.
- mcbetz 7y ago
  Thanks for the bug report. Added an issue and will fix it asap: https://github.com/minthemiddle/tailwind-button-playground/issues/8 https://github.com/minthemiddle/tailwind-button-playground/i...
csscrack 7y ago
I find Tachyons better than Tailwind. Much shorter class names and a thought-through system which makes it hard to make bad design. Also setup (there's none) is easier than with Tailwind.
- mcbetz 7y ago
  Tachyons certainly is a good alternative. The system is as thought-through as Tailwind's, though there certainly is a bigger ecosystem (tutorials, videos, components) for Tailwind. Also I found it easier to customize and extend Tailwind. And if I don't plan to customize I just use the CDN version which is just one-line. Again, Tachyons is a perfect contender and if Tailwind does not convince you for whatever reason, have a look at Tachyons which has a slightly different philosophy.
  - csscrack 7y ago
    My take on this customization: Once you need more use css-in-js libs like emotion. But maybe you like to elaborate with an example you custom stuff works in Tailwind?
iDemonix 7y ago
This is cool! It'd be nice if there was a list of presets or something to scroll through.
- mcbetz 7y ago
  Nice idea, I created a ticket for that and will work on it: https://github.com/minthemiddle/tailwind-button-playground/issues/9 https://github.com/minthemiddle/tailwind-button-playground/i...

40 points by mcbetz 7y ago

I built this small tool to create buttons with Tailwind. The buttons can have background and text colors, margins, paddings, rounded corners and shadow.

wzy 7y ago
Are you going to build one for every design element in Tailwind?
- mcbetz 7y ago
  Good idea, any wishes?
  - adelarsq 7y ago
    Generate custom components, such ELM buttons already with CSS (https://package.elm-lang.org/packages/elm/html/latest/Html#button https://package.elm-lang.org/packages/elm/html/latest/Html#b...) in it =)

kingkool68 7y ago

I like being able to modify the properties and see the resulting classes.

mcbetz 7y ago
I would like to expand it so you can build whole components (like cards or navigations) and get the classes to copy them.

hmhrex 7y ago

I've been toying with the idea of using Tailwind (I currently use Bulma), but I'm concerned about it taking more dev time than necessary. Would love to hear people's experiences!

sansnomme 7y ago
It's a lot more maintainable than raw CSS but when you grow big you will have to refactor. The main thing about Tailwind is that the author is a very, very talented designer who also produces high quality YouTube tutorials. It's very easy to make Stripe-style landing page with Tailwind because all the examples are in that style. Most of your existing frameworks like Bootstrap, Bulma may look unique but when you want to ship a pretty page you will need severe customisation together with a fair bit of design talent. At the end of the day, you want your site to look beautiful, not just yet another wannabe-unique-glitzy-slightly-modified-themeforest site. https://youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ https://youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ His videos are worth their weight in gold even if you don't use Tailwind. From Figma design all the way to pixel perfection. You won't be able to find this level of expert knowledge on Udacity.
- hmhrex 7y ago
  In what ways do you see refactoring becoming necessary down the road? Good to know about the videos. I'll definitely check them out.
  - sansnomme 7y ago
    Think React-style. A button becomes a component. Otherwise your page may look noisy with each element having 5-10 tags attached. https://tailwindcss.com/docs/extracting-components/ https://tailwindcss.com/docs/extracting-components/ You can either use their built-in system or whatever your JS framework provides or both.
mhd 7y ago
I did some experiments, after watching the quite helpful design videos by the two main developers, and it's been quite useful. Definitely best suited (or only suited?) to a component-based system, where the repetition is soon factored out. It's a bit hard to get a unified style going, especially if you don't get a thorough design document from someone who knows what they're doing -- but it's definitely doable, mostly because you don't attempt every minute px/em/ex variation on every border or padding, but you're restricted to a set of sizes and dimensions that fit well together. (Although, one of the developers still does fiddle too much in his videos to adjust to the Figma blueprint) And easy enough to customize with the built-in tool, if you e.g. want to omit certain styles, add some distances yourself or have your own palette.

keb_ 7y ago

This is awesome! I recently switched to Tailwind from using Basscss in my projects, and am excited at the ecosystem and amount of support around Tailwind. Tools like this make it easier to introduce newcomers as well.

jtth 7y ago

The contrast button doesn’t work when the background is set to transparent.

mcbetz 7y ago
Thanks for the bug report. Added an issue and will fix it asap: https://github.com/minthemiddle/tailwind-button-playground/issues/8 https://github.com/minthemiddle/tailwind-button-playground/i...

csscrack 7y ago

I find Tachyons better than Tailwind. Much shorter class names and a thought-through system which makes it hard to make bad design. Also setup (there's none) is easier than with Tailwind.

mcbetz 7y ago
Tachyons certainly is a good alternative. The system is as thought-through as Tailwind's, though there certainly is a bigger ecosystem (tutorials, videos, components) for Tailwind. Also I found it easier to customize and extend Tailwind. And if I don't plan to customize I just use the CDN version which is just one-line. Again, Tachyons is a perfect contender and if Tailwind does not convince you for whatever reason, have a look at Tachyons which has a slightly different philosophy.
- csscrack 7y ago
  My take on this customization: Once you need more use css-in-js libs like emotion. But maybe you like to elaborate with an example you custom stuff works in Tailwind?

iDemonix 7y ago

This is cool! It'd be nice if there was a list of presets or something to scroll through.

mcbetz 7y ago
Nice idea, I created a ticket for that and will work on it: https://github.com/minthemiddle/tailwind-button-playground/issues/9 https://github.com/minthemiddle/tailwind-button-playground/i...