AOE Technology RadarAOE Technology Radar

Tailwind CSS

codingfrontend
Adopt

Tailwind CSS has continued to be a vital part of our frontend development toolkit. The recent update to version 4.0 has moved all of the theme configuration into CSS variables. We appreciate this update since it further increases the reusability of design tokens, can allow for theme changes during runtime and fully moves Tailwind into CSS.

Finally, comparing Tailwind CSS to CSS-in-JS solutions, we've experienced that it does not present the same pitfalls when integrating with React Server Components. While some CSS-in-JS frameworks still cause compilation issues when used inside a Server Component, due to their reliance on client-side JavaScript, Tailwind CSS does not have this problem due to its static nature and being purely CSS-based.

Adopt

At AOE we use Tailwind now on several projects. From fast prototyping, over marketing websites to enterprise applications.

Trial

Tailwind CSS is a framework that heavily utilizes CSS classes. What seems to be a very different approach in the beginning, turns into a big "ah-ha-moment" during development and even more during the build step. CSS classes are entirely generated based on a configuration file that outlines the entire design system including states, nuances, etc. Tailwind's high flexibility results in a set of CSS classes aligned with UX/design, requiring just a fraction of code compared to a self-built solution. Colours, sizes, spaces etc. can have meaningful names that are easy to remember and shared between developers and designers. In turn, this results in a shared language with less explanation required. Support for deep integration into the development and build processes ensure optimized build times with incremental rebuilds only on parts really necessary. This obviously leads to very small build sizes with nearly 100% CSS coverage.

The deep integration and the extraordinary small build sizes were the main aspects for us to choose Tailwind CSS for resource-limited projects in the field of industry 4.0. These projects have a huge demand on a variety of interaction forms.

Tailwind helps us to fulfil modern user expectations by reducing the complexity of sophisticated industrial processes with a multi-device approach.

This is an unspoken expectation of today's operators of industrial processes. The evolution from classic cellular phones towards smartphones showed, there is still a huge untapped potential for usability improvements and adaptive processes, that reduce complexity especially the industry 4.0 field.