Docs

Docs

Utility Classes

A guide to using utility classes in Vaadin applications.

CSS utility classes are pre-built CSS classes that can be used to style native HTML elements and layouts by applying CSS class names to them.

Vaadin supports Tailwind CSS, and the Lumo theme has its own set of utility classes. These two collections are mutually exclusive and cannot be used simultaneously.

Although utility classes technically also work on Vaadin components, the complex, nested HTML structures of most components limit the usefulness of utility classes significantly. The simple layout components Horizontal Layout and Vertical Layout are exceptions, but be aware that many of the configuration APIs of those components may conflict with utility classes.

Source code
Java
var warningBox = new Div("Warning!");
warningBox.addClassNames("bg-orange-400 p-20");
Java
tsx
tsx

Using a large number of utility classes can lead to code that is hard to comprehend, as such they are best used sparingly. If you find yourself applying the same set of utility classes to many elements, consider creating your own CSS class in a stylesheet instead, or creating a reusable component that encapsulates the application of those class names.

Tailwind CSS (experimental)

Tailwind CSS is a popular CSS utility class framework that Vaadin has experimental built-in support for.

To enable Tailwind, enable the com.vaadin.experimental.tailwindCss feature flag by adding the following line to src/main/resources/vaadin-featureflags.properties:

Source code
properties
com.vaadin.experimental.tailwindCss=true

Tailwind classes are applied to UI elements like any other CSS class name:

Source code
Java
var warningBox = new Div("Warning!");
warningBox.addClassNames("bg-orange-400 p-20");
Java
tsx
tsx

A complete list of Tailwind utility classes is available in the Tailwind CSS documentation.

When enabled, the Vaadin build process feeds all source files through the Tailwind compiler that collects all Tailwind class names used in them and compiles a static stylesheet that contains CSS only for the identified class names.

Lumo Utility Classes

The Lumo theme includes its own set of utility classes called Lumo Utility Classes. These only work in combination with the Lumo theme, but not with the Aura theme. To load the Lumo Utility Classes, import the respective stylesheet with @StyleSheet.

Source code
Java
@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(Lumo.UTILITY_STYLESHEET)
@StyleSheet("styles.css")
public class Application implements AppShellConfigurator {
 ...
}
Note
Loading Lumo Utility Classes through theme.json is no longer supported
In Vaadin 25, it is no longer possible to load the Lumo Utility Classes through the theme.json configuration file in your theme folder. Use the approach documented above instead.

The LumoUtility class provides all included class names as constants for easy usage in Flow.

Source code
Java
var warningBox = new Div("Warning!");
warningBox.addClassNames(LumoUtility.Background.WARNING, LumoUtility.Padding.MEDIUM);

A complete list of Lumo Utility Classes is available on its reference page.

ab43f5a0-4846-4c32-a794-2d4ba428dbee