> Markdown version of [Utility Classes](https://vaadin.com/docs/next/styling/utility-classes). Section index: [llms.txt](https://vaadin.com/docs/next/styling/llms.txt)

# Utility Classes

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](https://tailwindcss.com/), and the Lumo theme has its own set of [utility classes](https://vaadin.com/docs/next/styling/themes/lumo/utility-classes.md). 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](https://vaadin.com/docs/next/components/horizontal-layout.md) and [Vertical Layout](https://vaadin.com/docs/next/components/vertical-layout.md) are exceptions, but be aware that many of the configuration APIs of those components may conflict with utility classes.

**Flow**

```java
var warningBox = new Div("Warning!");
warningBox.addClassNames("bg-orange-400 p-20");
```

**React**

```tsx
<div className="bg-orange-400 p-20">Warning!</div>
```

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.

## <a id="tailwind"></a>Tailwind CSS (experimental) (since V25.0)

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

To enable Tailwind, enable the `tailwindCss` [feature flag](https://vaadin.com/docs/next/flow/configuration/feature-flags.md) by adding the following line to `src/main/resources/vaadin-featureflags.properties`:

```properties
com.vaadin.experimental.tailwindCss=true
```

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

**Flow**

```java
var warningBox = new Div("Warning!");
warningBox.addClassNames("bg-orange-400 p-20");
```

**React**

```tsx
<div className="bg-orange-400 p-20">Warning!</div>
```

A complete list of Tailwind utility classes is available in the [Tailwind CSS documentation](https://tailwindcss.com/).

> **Important: Class names need to be present in the source code.**
>
> When enabled, the Vaadin build process feeds all source files through the Tailwind compiler. The compiler then collects all Tailwind class names used in the source files and compiles a static stylesheet that contains CSS only for the identified class names. That means you can’t use any other class names in the browser inspector, for example, when degugging or testing in the browser.

## <a id="lumo-utility-classes"></a>Lumo Utility Classes

The Lumo theme includes its own set of utility classes called [Lumo Utility Classes](https://vaadin.com/docs/next/styling/themes/lumo/utility-classes.md). 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`.

```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.

```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 [Lumo Utility Classes](https://vaadin.com/docs/next/styling/themes/lumo/utility-classes.md).

`ab43f5a0-4846-4c32-a794-2d4ba428dbee`