Can TailwindCSS Survive?

Tailwind CSS was chosen by Shopify as the CSS framework for their new headless system, Hydrogen.

Tailwind CSS is a utility-first CSS framework. It focuses on minimizing the final CSS size by providing pre-built atomic CSS classes. It allowed developers to quickly style web pages, and it became a hot topic among front-end developers.

Although it has its benefits, we found two major limitations with Tailwind.

Tailwind provides CSS, but it does not provide Javascript components. It only provides styles. We have to find additional libraries for behaviors and actions.

Currently, there are only two major libraries which supports Tailwind:

• Tailwind UI: the paid library supported by the official TailwindCSS team.

• Flowbite: a TailwindCSS based component library. It provides basic widgets, such as modal and carousel. The paid tier provides advanced options.

We decided to use Flowbite and its carousel widget.

However, the carousel was not able to implement a common feature - an infinite-loop style of slide navigation.

• The swipe support of the carousel is built with the React Indiana Drag Scroll library. However, this swipe library uses a rectangular shape with a set boundaries to implement the swiping area. This rectangular shape cannot implement a reel with infinite loop.

We had to look for a non-Tailwind library to work around. The introduction of non-Tailwind CSS rules started to create exceptions outside of the Tailwind's CSS size management.

Flowbite, native Tailwind library, could not implement a trivial "infinite loop" carousel. We had to look for non-Tailwind alternatives. Limited options in React library is a huge minus for Tailwind.

Support is limited among headless CMS services

We keep normal page contents in a separate headless CMS system. But, the CMS system does not support Tailwind.

• We had to workaround it by selecting basic Tailwind rules, and writing them into a static HTML file which will be read by the Tailwind preprocessor.

No page builders

There is no page-builder style quick editing UI tool which can generate a Tailwind based content.

It seems some are going back to the older alternatives:

• Preprocessors: SCSS, LESS

• CSS-in-JS libraries: CSS Modules, styled-components, etc.

iPhones vs Android war was hot in 2011, and the famous CSS framework, Bootstrap, was released. It quickly gained popularity with its column-based layout system. It helped upgrade many websites to support mobile screens.

However along the way, web developers started to find Bootstrap too rigid. The cost of customization started to outweigh the benefit of quick UI implementation. At the end, Bootstrap was relegated from a main CSS framework to a quick prototyping tool.

I am seeing a similar pattern with TailwindCSS.