
Show HN: Tailwind Button Playground - mcbetz
https://minthemiddle.github.io/tailwind-button-playground/
======
iDemonix
This is cool! It'd be nice if there was a list of presets or something to
scroll through.

~~~
mcbetz
Nice idea, I created a ticket for that and will work on it:
[https://github.com/minthemiddle/tailwind-button-
playground/i...](https://github.com/minthemiddle/tailwind-button-
playground/issues/9)

------
hmhrex
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!

~~~
mhd
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.

~~~
iKlsR
Relevant -
[https://github.com/heybourn/headwind](https://github.com/heybourn/headwind).
An opinionated Tailwind CSS class sorter built for Visual Studio Code.

------
keb_
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.

------
mcbetz
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
Are you going to build one for every design element in Tailwind?

~~~
mcbetz
Good idea, any wishes?

~~~
adelarsq
Generate custom components, such ELM buttons already with CSS
([https://package.elm-
lang.org/packages/elm/html/latest/Html#b...](https://package.elm-
lang.org/packages/elm/html/latest/Html#button)) in it =)

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

~~~
mcbetz
Thanks for the bug report. Added an issue and will fix it asap:
[https://github.com/minthemiddle/tailwind-button-
playground/i...](https://github.com/minthemiddle/tailwind-button-
playground/issues/8)

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

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

------
csscrack
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
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
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?

