I've gone ALL IN on Tailwind CSS. Here's what I built in the last month.
Tailwind CSS is a utility-first, unopinionated CSS framework. It's been pivotal in enabling me to rapidly create, design, and deliver new ideas. In the past month I've...
- Redesigned and open sourced my blog, masilotti.com
- Updated my personal branding to a Tailwind color, "green-500". Blog icon and colors, twitter icon background, Indie Hackers avatar, everything.
- Designed and open sourced a landing page for my iPhone app.
- Open-sourced a SwiftUI library that adds all 100 Tailwind CSS colors.
- Built a social image generator around Hero Patterns and Hero Icons.
If you want to dive in I recommend reading how I went from zero to Tailwind CSS in a weekend.
I can't recommend this framework enough! What's holding you back from giving it a try?
Trending on Indie Hackers
My wife uses Tailwind for all of our clients and she loves it.
These are the latest developments he built from scratch:
What do you think?
WE LOVE Tailwind! @joemasilotti
Wow, those look amazing! I love how each is completely different than the others, even though they are built with the same framework. Try doing that with Bootstrap 😂
My favorite is definitely https://identidadmaker.com - the text flying in is a pleasure to watch.
Thank you so much for the comments!
We strive to create different sites all the time and that is something that with Bootstrap was too difficult for us. Now creativity can fly to infinity and beyond hehe
You know, if you need collaboration in web development projects, here we are :-)
That's exactly how I feel coming from Bootstrap! You know, I might just need some design help soon. I'm very close to launching mugshotbot.com and will be creating new templates soon. My email is on my profile.
Wow very interesting, I will write you by email to be in contact and let me know what you need.
Thanks and regards!
I've been using Bootstrap and custom CSS and recently started building with Tailwind.
Pro:
99% of the time I never touch the CSS file (can do most things with classes).
Con:
HTML elements can look weird (in the code) with 10 to 15 classes.
I love Tailwind CSS and it inspired me to redesign my personal website and blog. It's easy to use once you know CSS and it gives you a default design system that you can tweak based on your branding instead of ready-made components.
Looking forward to using it for all my personal projects from now on and possibly start working on client projects with it once I get better at it.
oh man yeah i've recently made the switch to tailwind and it feels like I'm building at a 100mph compared to just plain css. Where has this been my whole life lol
Ha, for real! I have an older sideproject (6 months old 🤣) that uses Bootstrap and when I look at the code I shudder.
I actually just started using it about a week ago. I've been avoiding it for a while because I thought it was too complex but now I love it. Going to be using it in all of my new projects now.
I'm glad you're enjoying it so much! There's definitely a steep learning curve at the beginning, especially integrating it into your build system. I wish that was a little easier, to be honest.
Wow nice one, it seems like Tailwind is really picking up steam.
I'm loving the utility first approach. Not using Tailwind specifically, just creating my own minimal utility CSS as I need it. At first I was skeptical of this approach over the typical named classes, but the speed I can work at and the simplicity has me hooked, I find myself using it for all my new projects.
That's actually how the framework got started! Adam Wathan was live streaming his coding on another project and people commented asking for his CSS. A few years later that ended up being the base for Tailwind.
Oh cool! It's funny how often really successful things like this get started, almost without an original intention, it just takes on a life of its own.
Slightly off topic, but, lately I've been thinking maybe that's the key to this whole thing - to just sort of follow interests and ideas without goals until something unexpectedly gathers momentum rather than forcing it. But it's hard to balance that with the feeling that there needs to be some predictability, planning, and thing to work towards.
Honestly, that's huge. You already have the passion and public interest by that point. So actually "selling" won't be hard but a natural progression.
Adam talks about a marketing spring: you spend time compressing by giving content away for free and then release it when you want to sell. I come back to this Twitter thread like every day. https://twitter.com/adamwathan/status/1296447318074568704
Great thread, saving that, thanks
Yep, I did the same this weekend. Also,built a site with it for my newsletter.
I am not going back to Bulma...
I think your SSL certificate is wonky, I'm getting an error when trying to load the page.
It's working superb. Mayne issue is on your end
You forgot to configure non-www cert :) Try opening with a different browser/incognito.
How, weird. All is working for me.
Everything is fine in Netlify...
Looks like it is working now! Maybe the DNS was still propagating or something.
Super!
Do you think it would have taken you a lot more time to implement the same pages in plain CSS? Or the same time (or even less), only that they wouldn't have looked as nice?
It would have taken me much more time to implement with plain CSS. Without Tailwind UI it might have taken longer though, a lot of the code comes from there.
That said, if I had used Bootstrap it probably would have taken less time. But it wouldn't have looked nearly as good!
Tailwind is great! I'm also a newcomer to it, and I'm loving it. My portfolio www.glyde.com.br uses Svelte and TailwindCSS, and it was a awesome combination, so much so, that I'm now using it on a React repo at work, and on a freelance Vue project. Really made my development much faster.
Your site looks great! Awesome to hear you can use the framework both at work and at home.
Thank you! Yes, it's been really nice.
What's the thing you liked the most using Tailwind?
The framework has kind of removed the "cascading" part of CSS. Meaning, the only time you get global behavior is when you specify you want global behavior. In practice it translates to tiny classes that behave exactly the same even when used in conjunction with others. Also, you "never" have to write custom CSS, it's all done via the configuration!
Nice Joe! I started converting my web app to tailwind the other day. Still work to do, but I decided to give it a go.
That's great! How are you liking the framework so far? I'm curious, what is the site powered by (React, Rails, plain old HTML, etc.)?
Tailwind is sweet. The naming convention was easy to pickup on. I haven't started using @apply or anything like that.
I decided to try Svelte for the front-end. I know almost nothing about front-end frameworks, and Svelte seemed like it would be fairly straightforward.
There was a bit of extra work getting Tailwind up and running with Svelte.
Yeah, I haven't used @apply much myself, either. The creators aren't too keen on it, actually!
Sounds like there's a blog post coming soon 😉
This comment was deleted a year ago.
In theory, no site should every become too "Tailwind CSS" since there is nothing designed in the framework. However, I could definitely see sites becoming too "Tailwind UI" the UI framework built around by the creators.
This comment was deleted 4 years ago.
This comment was deleted 5 months ago.
Approved and merged. Thank you thank you thank you!
This comment was deleted 5 months ago.
This comment was deleted 3 months ago.
I had been using Bootstrap my entire dev life, too! So much so that I've been contributing to their open source fund for a few years now.
Tailwind is a mindset shift. You aren't getting prepackaged components to drop into your site. You're getting tools to make the components as quickly and easily as possible.
Bootstrap's learning curve is very minimal. You add the CSS via a CDN and start playing around with the grid and slap a few cards on the page. Done. It looks fine. If that's good enough for you then stop there, Bootstrap is perfect (still) for MVPs and/or if you don't care too much how it looks.
Tailwind takes the component approach and tosses it out the window. You have to build everything from scratch (unless you copy-paste from tailwindui.com). At first, this sounds daunting. But as you actually work with the framework you realize how it offers infinite possibilities, all without ever really having to write CSS. You only add classes to elements, that's it. And that's huge but hard to explain the value, you kind of have to get in there and do it.
tl;dr - If you want to get something up and running ASAP stick with Bootstrap and it will look fine. If you want to extend and make something your own as quickly as possible check out Tailwind.
Forgot to mention in my reply one more thing... it's fun.
When I use it it makes me feel like I'm designing things, and that I'm a decent designer. ^_^
You know, I never thought about this, but you're right. "Oh look, there's not enough spacing there!" "This text doesn't stand out, let's use a deeply saturated color." "On mobile I want this grid to be a straight line."
I find myself saying those things all the time, but with Tailwind I can actually do them. And honestly, I learned them from the Refactoring UI book.
I am also curious about this. I use bootstrap for everything and I am pretty comfortable with it. I keep seeing tailwind pop up and I wonder if I should look into it. Anyone that has used both, what are the advantages and disadvantages of bootstrap and tailwind and how do they compare?
Bootstrap is centered around components (at least last I used it), and it has some JS-enabled things. So you get more out of the box. It's great, but it's hard to make things look and feel like something else than Bootstrap. If you're happy with the look, feel and selection of components in Bootstrap then it's probably the fastest thing to use.
Tailwind doesn't have components. Not completely true since there are lots of example components out there, free and paid (like tailwindui.com). It's centered around utility classes. At first the HTML will feel very ugly especially if you come from Bootstrap. But once you get past that, you realize that it's so... damn... fast... to create virtually any component. If you need components with behavior you'll need to wire it up yourself with your flavor of JavaScript.
Use Bootstrap if you're really strapped for time, don't like writing JS and you're fine with the Bootstrap "look".
Use Tailwind if you want more control of the look and feel, but want something waaay faster than plain CSS.
yet, most of the tailwind project's I've seen looks like bootstrap :)
Except the ones where it looked like something else and you didn't know. :D
No more switching between html and css files itself is good enough for me to switch to Tailwind. Looks, Layout can be easily handled (to major extent) in tailwind.
Coming from 960.gs to bootstrap, then looking at tailwinds, feel like we've gone full circle.
Tailwind is halfway between bootstrap and plain css. It's way easier to do custom designs by combining utility classes. If you're fine sticking with one of the thousands themes built for bootstrap, I don't think it's worth the change.