Skip to main content

Differences with tailwindcss

Many people ask me what is the difference between Fower and Tailwindcss，you can get the answer from me here.

Like tailwindcss, Fower is a utility-first CSS tool, which is the biggest similarity between them. In fact, before tailwindcss, there are already some utility-first css tools, like ACSS, Tochyons.

In other respects, the utilitiy naming method of tailwindcss is excelent, Many utility names of Fower are borrowed from tailwindcss.

what is the difference between Fower and Tailwindcss?

CSS in JS​

Tailwindcss is pure css solution, Fower is a CSS in JS solution. I personally prefer Javascript to CSS. Because fo JavaScript, Fower is more flexible. You can learn more about CSS in JS from why-you-should-learn-css-in-js.

Framework-agnostic​

By default, Tailwindcss uses in pure web development. Fower is Framework-agnostic which is one of important motivations for the creating of Fower. Fower supports Web, React Native, and Mini Program. With Fower, you can write style with the same way in Web, React Native, and Mini Program.

Type Safe​

Fower is completely type-safe, especially with JSX, the development experience will be great, the type provides very good IntelliSense and documents, and no need to rely on specific editor plugin to achieve IntelliSense. In Tailwindcss，You may depend on some editor plugin to get Autocomplete, but when you customize some utilities, you may lost Autocomplete.

Layout Toolkit​

If I were to choose a favorite feature in Fower, it would undoubtedly be the Layout Toolkit.

Fower provides a powerful Flexbox-based layout toolkit. By adjusting the direction and alignment of the layout, you can build most of the layout and make the layout easier.

Predictable style​

In traditional CSS, it's not predictable to override style, also with tailwindcss. But with Fower, the style is predictable, more about Predictable style

Color helper​

In Fower, you can handle color with some postfix, this is a benefit of JavaScript.more about Color helper

Composition Postfix​

In Tailwindcss, you use some postfix like hover:, sm:, dark: to handle pseudo, repsponsive, dark mode style, In Fower, you use some postfix like --hover, --focus, --sm, --dark, --T{amount}... Most importantly, in Fower, the order is arbitrary.