Tailwind CSS support

[rolfsmeds]

Description

Full or partial support for the Tailwind CSS framework in V25, with Aura (and possibly Lumo) style token integration.

Tier

Free

License

Apache 2.0

Motivation

Background

The Tailwind CSS framework has become almost a de-facto standard for CSS utility classes in recent years, to the extent that web developers, especially those with React experience, expect to be able to use it.

The Lumo Utility Classes introduced in 2021 provide similar utility classes, but constitute only a fraction of the utilities available in Tailwind.

Problem

While it has been possible to use it in Vaadin applications before, integration has been non-trivial.
Furthermore, the new Aura theme in V25 means that the Lumo Utility package would need to either be duplicated for it, or refactored to be theme-agnostic to work with both Lumo and Aura, and the available utilities would still correspond to only a fraction of the utilities developers are used to with Tailwind.

Solution

The end goal is to provide full support for Tailwind CSS, with

• Just-in-time generation of the classes used in the project
• Integration of Tailwind core style tokens (such as colors, typography and sizing/spacing) with those in Lumo and Aura
• A typesafe Flow API
• Included by default in Aura theme
• Provided as an opt-in alternative to Lumo Utility Classes for use with the Lumo theme

In case this is not achievable by 25.0, an interim solution will be provided instead:

• A precompiled, static subset of Tailwind CSS, corresponding in scope to the Lumo Utility Classes
• No dedicated Flow API (but usable via the usual CSS classname APIs)
• Style token integration only for Aura theme

Requirements

• Tailwind CSS (at least a precompiled subset corresponding to Lumo Utility) available out of the box in V25 projects
• Integration of core style tokens with those of Aura
• Included by default in Aura theme
• Documentation

Nice-to-haves

• Full Tailwind CSS support with JIT generation based on classes used in Hilla and Flow
• Typesafe Flow API
• Opt-in for Lumo theme
• Integration of core style tokens with those of Lumo

Risks, limitations and breaking changes

Risks

• Flow support for Tailwind's JIT generation might be tricky (a custom build step may be required)
• Design and implementation of a Flow API for Tailwind's dynamic classes (e.g. size-123px) is non-trivial
• Considering the extent of Tailwind CSS, the Flow API may need to be somehow automated

Limitations

• Uncertain if full Tailwind support (requiring generation of CSS based on classes used in the project) can be provided for Flow's precompiled frontend bundle
• Styling Vaadin components (other than layouts and the native HTML element classes in Flow) with Tailwind will not be possible, since Tailwind CSS classes can only be applied to their root elements, and most component styling requires targeting their child elements, shadow parts and states.

Breaking changes

None expected.

Out of scope

• Tailwind Plus UI components

Materials

• RFC
• Related PRDs:
  • Theming system renewal #7453

Metrics

TBD

Pre-implementation checklist

• Estimated (estimate entered into Estimate custom field)
• Product Manager sign-off
• Engineering Manager sign-off

Pre-release checklist

• Documented (link to documentation provided in sub-issue or comment)
• UX/DX tests conducted and blockers addressed
• Approved for release by Product Manager

Security review

None