Show HN: Tailwind Button Playground (opens in new tab)

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.

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

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.

I am a solo developer whose productivity in designing webpages grew massively thanks to Tailwind. I love design but had always dreaded to touch S/CSS. I always had these CSS property (how exactly does x get defined?) questions as well as architectional (where do i put the classes and how to order and name them?).

With Tailwind, I can quickly translate what I want to see into class names: Blue button with white text and shadow on hover? <class="bg-blue-500 text-white hover:shadow">! The grammar is so simple that you will know 80% of the utility classes after a couple of hours. Some critics say that you loose consistency, but that does not happen to me as I use components (Vue, Laravel, Tailwind config) whenever I feel that I have a lot of repeating patterns.

I am a stereotypical backend developer with little experience implementing custom design, before Tailwind I was using stock bootstrap.

I am building my first product using this tool and after I get over first hurdles everything went smoothly. Tutorials on their homepage are pure gold and helped me going. Also take a look on youtube channels of Tailwind authors (Refactoring UI), those are great.

In conclusion I am glad I've taken some time to learn basics, it took me maybe three or four afternoons and now I'm as productive as in Bootstrap + my designs look much much better.

It does require a bit more setup and getting used to but once you're up to speed you'll be going like a madman.

I highly advise adding PurgeCSS to the build pipeline with Tailwind, it can reduce the output CSS from around 250kB to 15kB for a small website without removing stuff manually from the configuration. The setup is explained in the docs [0].

[0] https://tailwindcss.com/docs/controlling-file-size

I'm using Tailwind to power a project of mine (monitoro.xyz) and I would say the experience was amazing.

Throughout my entire experience with it the only part I found annoying was setting up the build system, but that's a one-time cost.

I've been experimenting with both Bulma and Tailwind as a way to finally ween myself off of Bootstrap.

What is it about Bulma that's pushed you to look for something else?

Are you going to build one for every design element in Tailwind?

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.

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

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

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