Suggestion: Move to Tailwind from Infima

[osseonews]

Docusaurus is in my opinion the best React framework now to build anything in React, even if people seem to associate it with only document websites (incidentally we built an entire e-commerce site on Docusaurus).

My only issue is that Docusaurus still relies on Infima for the presentation/CSS layer. Infima is not really maintained, and it is way behind other CSS framworks. In the React world, Tailwind has become a standard. Can Docusaurus move to Tailwind from Infima? Now I know you can easily install Tailwind on Docusaurus, but still so much of the styling defaults to Infima for the classic theme, it's sort of a pain to track it all down and make custom CSS adjustments. So my suggestion is to ditch Infima and just base the entire theme on Tailwind. This will make styling much easier.

Thanks for listening and all your hard work in making Docusaurus.

[slorber]

Thanks, although I find it surprising to implement an e-commerce website with Docusauurs but why not 😅

We already have an issue for Tailwind, but have other things to work on for now unfortunately: #2961

Most likely in the future we'll have both the classic Infima theme and Tailwind, both implementing the same design, but using a different styling solution under the hood.

[osseonews]

Thanks I didn't see that issue. As for ecommerce, as you can run any React code in the pages folder or in MDX file, you easily use a library like useSwr (or React Query) to make parts of the page "dynamic" which is suitable for e-commerce. I was inspired to try this after finding some repos that implemented User Auth with Docusaurus. Honestly, I've used every single framework for ecommerce now, Nextjs, Remix etc. and docusaurus has been the easiest to work with b/c many things are available out of the box and done for you, and the dynamic parts, like prices, inventory, are then easy to just fill in. Reality is that for most businesses the vast majority of information doesn't change too frequently, so SSG works for 95% of the website. Maybe I'll open source the project at some point.

[slorber]

I see thanks

Yes that could work for small e-commerce shops, like it also did a few years ago with Gatsby when it only supported SSG.

But if you have a site with thousands of products with a large catalogue, dynamic inventory, people updating the products regularly, that doesn't look like a good fit to me.

[osseonews]

Yes, we built our first site with Gatsby and Magento 4 years ago. In terms of scalability, it scales because the dynamic backend is handled by a headless ecommerce system, so the queries are done with useSwr to the headless API, so the heavy stuff, like dynamic inventory, is based on their servers. Checkout is done externally via Stripe or Shopify Checkout, so that's not even a consideration as far as Docusaurus. Also, we run this on cloudflare, so for other dynamic data we use Cloudflare Workers, which are edge functions and ridiculously fast.

None of this technology was available just a few years ago, so I wouldn't have that it was possible then. But it is now. Honestly, I don't see why this wouldn't scale to thousands of products (we have 100 now), b/c there is no limitation as far as the React app is concerned. The issue is only the response time from outside APIs and these are ridiculously fast nowadays.

[osseonews]

I mean, of course, you couldn't run something like Amazon off of this infrastructure, but vast, vast majority of e-commerce nowadays is run by Woocommerce or Shopify and for 99% of these stores this solution would work well, I believe. In fact, for headless shopify, in our tests it was much better than hydrogen (Shopify's own framework), and the code was way less complex.