Evaluating Vaadin for Specific Requirements

Currently, we are evaluating whether Vaadin is fitting our needs.

The UI/UX team has the requirement that they would like to use tailwindcss.com for styling the components. Unfortunately, I am stucked since several days to find out, how to make any CSS framework (like tailwindcss, bulma.io, etc.) available within the component’s CSS scope.

This difficulty is currently a huge deal breaker to continue the road with Vaadin. Any advice/solution on how to use tailwind.css for:

  • Java Only
  • Java + HTML


Thanks in advance!

The complete Vaadin V14 framework offering includes Java framework, Component set with their Java representation and theming system Lumo. If you would attempt to use 3rd party design system such as Tailwindcss or Bootstrap, you will not be able to use Vaadin’s own components and theming system. These 3rd party design systems usually have their own component set or are based on native html elements in some way. So if you want to do Java Only development, you would need to create Java representations of those 3rd party components etc.

From Vaadin V15 onwards (the latest version V17 beta) we have added Vaadin for Typescript development model. In this model you can develop views using TypeScript (and html naturally). In this development model it is naturally easier to use 3rd party components and their CSS template directly. However, also in this scenario the third party CSS template does not apply to Vaadin components, since they have specific structure and require specific way to style them.

To conclude. To get best value out of Vaadin, I would not not use Tailwindcss. But if you are nevertheless forced to use it, then I would study Vaadin 17 and Vaadin for Typescript development model.