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 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.
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.
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.
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].
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.
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?
