Show HN: Tailwind Button Playground(minthemiddle.github.io)
minthemiddle.github.io
Show HN: Tailwind Button Playground
https://minthemiddle.github.io/tailwind-button-playground/
33 comments
This is cool! It'd be nice if there was a list of presets or something to scroll through.
Nice idea, I created a ticket for that and will work on it: https://github.com/minthemiddle/tailwind-button-playground/i...
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!
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 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.
Relevant - https://github.com/heybourn/headwind. An opinionated Tailwind CSS class sorter built for Visual Studio Code.
Yeah, some of those pain points are what I think about. Thanks for explaining.
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.
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.
In what ways do you see refactoring becoming necessary down the road?
Good to know about the videos. I'll definitely check them out.
Good to know about the videos. I'll definitely check them out.
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/
You can either use their built-in system or whatever your JS framework provides or both.
https://tailwindcss.com/docs/extracting-components/
You can either use their built-in system or whatever your JS framework provides or both.
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.
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.
That just seems like a lot of classes though. Is it possible to create a component that inherits those classes?
You simply create your own component class and `@apply` tailwind classes to it.
See: https://tailwindcss.com/docs/extracting-components
See: https://tailwindcss.com/docs/extracting-components
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.
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.
Have you got any links to examples to some of your designs? It sounds like I'm in the boat you've escaped from. I'm a long time back end developer, and the front end is a bit scary. I've been using Bootstrap + jQuery for as long as I can remember, and I've tried to switch to Tailwind + Vue more times than I can remember but always faltered back...
Not yet, it still lives only on my computer, but the designs are still meh or in best case utilitarian. I've started to build this product for exact reason you mentioned: finally build something substaintial with Vue, learn how to work with Webpacker (and other Rails 6 features) and build Flutter app (yet to be done).
I am going to do big rewrite of my saas app this year, this is my attempt to learn couple of new technologies to see if they are fit for me and as a place to make mistakes before coding something I care about.
I am going to do big rewrite of my saas app this year, this is my attempt to learn couple of new technologies to see if they are fit for me and as a place to make mistakes before coding something I care about.
Very interesting. I'll have to check out the videos.
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 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
Thanks for the tip! I'll definitely look into that.
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?
What is it about Bulma that's pushed you to look for something else?
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.
I built this small tool to create buttons with Tailwind. The buttons can have background and text colors, margins, paddings, rounded corners and shadow.
Are you going to build one for every design element in Tailwind?
Good idea, any wishes?
Generate custom components, such ELM buttons already with CSS (https://package.elm-lang.org/packages/elm/html/latest/Html#b...) in it =)
The contrast button doesn’t work when the background is set to transparent.
Thanks for the bug report. Added an issue and will fix it asap: https://github.com/minthemiddle/tailwind-button-playground/i...
I like being able to modify the properties and see the resulting classes.
I would like to expand it so you can build whole components (like cards or navigations) and get the classes to copy them.
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.
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.
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?