We’re switching to Tailwind CSS
by Davide PacilioWe’re very excited to announce that after 1-year of using our custom CSS framework, we recently decided to switch to Tailwind CSS as the new front-end base for all Cruip templates!
It hasn’t been a simple choice, because we invested a lot of time in building our custom CSS framework, but our long term goal and vision for Cruip has evolved during the time, so we had to change accordingly.
Why we’re switching to Tailwind
The main reason is that Cruip is transitioning from a niche gallery of landing pages to a marketplace of diverse high-quality coded resources, such as landing pages templates, website themes, and application dashboards.
So, the custom framework we initially built just to perform a specific task was no longer able to support the new long term vision.
Why Tailwind
The rationale behind switching to Tailwind is all about the freedom it gives us - we can create almost anything we've in mind without having to worry about the lack of flexibility of the common component-based approach.
Last but not least, we believe Tailwind is going to surpass Boostrap in terms of popularity sooner than later, and this poll we sent to our customers confirmed us just that 👇️
What’s next
Now, we’re getting closer to the launch of the first website theme based on Tailwind (sneak peek here), and we’re working on different new resources that will be released on Cruip.com in the next few months.
Alongside that, we’re also planning to change our business model from a buy and get all templates approach (similar to Tailwind UI) to a buy per single resource strategy - honestly, this is the scared part: our numbers are growing very well with the current model, but we feel that this a necessary step toward the new direction.
We'll keep you posted every step of the way :)
-
3
From my experience, you won't regret it. The versatility of TailwindCSS is as good than vanilla CSS plus, a very clear and simple syntax semantic. The learning curve is so short and flat (with a text editor integration) that there is almost no down sides of using it.
I discovered as well after 8 months of usage in RoleUp that you're ending up creating your own CSS components with the TailwindCSS Extracting Components. This is actually when it starts to become a no brainer. The framework is here to help you in the particularities of your project. Advantage that does not exist with a framework which is not utility-first.
-
1
Nice one Davide - I think it's a great call.
After skimming these comments I didn't see anyone mention how focusing on the Tailwind niche - becoming a go-to for high-end Tailwind templates - is a smarter marketing move than sticking with standard CSS.
Unsure about the once-off pricing. So tricky as MRR is like gold dust for us makers. But it works so well for certain products and I'll throw Adam in the debate. He is killing it with once-off products. So kinda confirms his/your community appreciates it too!
I've seen the quality and consistency of your templates, you will do great - all the best!
-
2
After skimming these comments I didn't see anyone mention how focusing on the Tailwind niche - becoming a go-to for high-end Tailwind templates - is a smarter marketing move than sticking with standard CSS.
This is exactly what we think, and I’m glad you pointed it out :)
Thanks for your kind words, Rob 🙌
-
-
1
Your Captcha Bot not letting me in. Tried 20+ captcha and he says invalid.
Should I make an appointment with a Doctor or will you fix the bug?I'm not lying: Check this: https://www.loom.com/share/03e5070d780c4930b4e4979dd0808b99
-
1
Can confirm, Tailwind is good. Most maintainable approach I've ever tried in my 10 years of web development.
-
1
Davide, a really good post and good luck with the business and the potential changes to the pricing. On a personal note, I generally prefer to pay a one-off fee, but others may feel that they would prefer to pay for each item used. The other option is to create tiers
On another note, we have been looking at both Tailwind CSS as well as the latest Bootstrap (and what is coming). I’m curious about your comment though regarding popularity. I have looked on Builtwith.com and Boostrap by far outstrips Tailwind in terms of installed base and so curious as to why you think that? Please understand I’m not challenging you - I’m genuinely curious as we are unsure which way to go, but my cursory look indicated that Bootstrap was maturing but still had by far the biggest base and also growth.
-
1
Thank you :)
Sure, it’s about the growth rate: Tailwind is growing faster than Boostrap, so even if the latter still maintains the lead (in terms of weekly installations, for example), we don’t think it will last long...
-
-
1
Great to hear - love using Tailwind, excited to see templates w. this.
-
1
I must say I never got how this became so popular.
I can understand how it is great to create the first version of something (allows the developer to quickly mock the designer's work), but I don't understand how you can use it to go through updates. Just try to change all <whatever> style across the project, and you'll find that you have to find-replace like crazy.Maybe for you who always create the first version of a template it is great. And if your customers like it, then it's probably the right thing for you.
-
2
Generally if its a larger project you don't dump all the classes into your HTML, you build components using the
applytag.Realistically though not many people are going to have an established project and suddenly need to change things like that across a wide area.
-
1
Right. But if the component is called blue-btn (which is the example that they give) and there's some change that makes all blue buttosns green, you're in trouble.
Of course you can name your components by role and not by style, but that goes against the library's styleguide.-
1
There'd be two possible solutions to that;
-
You name your classes by purpose or by a generic pattern (e.g
btn-primary) -
You find/replace to update them
For option 1 this is incredibly simple, you can actually set 'primary' up as a colour inside tailwinds config. So you would only change 1 line if your colourscheme changed.
This is actually the recommended approach if you arent using the build in color palet as you then only have to change your hex in one place.
It also has the added benefit of being a little more familiar for those of us that have used bootstrap for a long time.
For option 2 I don't see that being too big of a deal. The naming conventions are predictable so a find-replace isn't going to be a big deal at all, even if you're using all the colour hue/brightness levels (E.g
bg-blue-50).Even taking your example of changing a
btn-bluetobtn-green, this is a pretty simple change to make and certainly not something that I'd ever expect to cause significant headaches.I'd also argue that you A) realisically arent going to be needing to change all your colors very often, if ever and B) should be extensively testing your changes after such a huge change.
Tailwind's certainly not a silver bullet but a lot of the arguments against it are the same issues you'd have with any other css framework, including bootstrap and are just part and parcel of web development in my experience.
-
-
-
-
-
1
Sounds like a great idea! I've also considered using Tailwind for my templates. It's understandable that the pricing change is scary but consider this: what if your numbers are growing well not because of your current pricing but despite of it? Unless you really know, it's worth a try. And you can always go back to the previous pricing if it doesn't work out.
-
1
Thank you Felix :)
Maybe we become more conservative when we’ve something to lose, but as you said we will never know if we don’t even try, so the switch is totally worth the risk.
About Lenden: It could be a smart move if you’re planning to create multiple templates/layouts. If you’ve any questions about switching to Tailwind, please feel free to shoot me a message anytime :)
-
-
1
I really think it's what your most comfortable using. I personally use both tailwind and bootstrap.
-
1
This comment was deleted 4 years ago.
-
5
This comment was deleted 5 years ago.
-
3
You don't actually have to have all that html bloat at all with tailwind, people just chose to as its generally a heck of a lot quicker if you're just building something quickly.
It's got an
applytag included for use in sass/less/postcss so you can build things like your own cards, buttons, forms etc. The difference is they don't end up looking like the bootstrap default ones that way too many people use and don't bother to make unique.The recent inclusion of purgecss with no setup needed is a big plus as well, you can get your entire css down to just a couple of kb pretty easily.
Overall I love it. Like most people I hated it based on concept when I first saw it, but its one of those things that you really just need to try out to fully understand and appreciate I think.
-
2
Tailwind and Bulma, like others, aren't there to "fix" CSS.
It's mainly about organization.
-
1
Hi Simon, I never said that Bootstrap is going away, but that probably it is going to lose the lead as the most popular CSS frameworks. That's just a personal opinion, of course :)
-
1
Agree. I don't like that particular philosophy of setting up css classes per property. I believe tachyons was the first framework to do that.
Either way, go with what your customers like the best.
-
0
What HTML bloat? I noticed a lot of people who don't like tailwind are the people who never actually used it.
-
0
Tailwind doesn't cause bloat. Lack of knowledge does. You can create components with it just like any other framework. It sounds to me like you haven't used it.
What it does allow is quicker designs.
I've worked with a dozen Bootstrap projects- every single one ended up with a glorious amount of custom code that became a nightmare to maintain.
-
0
This comment was deleted 5 years ago.
-
1
You didn't look very hard.
https://tailwindcss.com/docs/extracting-components/
Do you also not use React or Vue or Angular or any other templating?
-
-
-
