Tailwind CSS @apply does not work in custom theme files in Vaadin Flow 25

[VSBKRALL]

Description of the bug

The Tailwind @apply directive does not have any effect when used inside custom CSS files in Vaadin Flow 25 projects. Utility classes included via @apply do not appear in the compiled output: the corresponding CSS selectors are either empty or missing entirely, and components using these classes do not receive any styling—even after performing a full rebuild and restart of the application.

Expected behavior

Styles from custom classes using Tailwind @apply should be processed and applied to components. For example,
.custom-hr { @apply h-[2px] bg-blue-200 w-full; } should generate CSS rules exactly as if the Tailwind utility classes were written inline on the component.

Minimal reproducible example

1. Create a custom CSS file, e.g. theme/styles.css with the content:

   .custom-hr {
     @apply h-[2px] bg-blue-200 w-full;
   }

2. Reference this CSS file in the theme or component.
3. Start the Vaadin Flow application (dev or prod mode).
4. Add an Hr Flow component and assign the custom class in Java:

   Hr hr = new Hr();
   hr.addClassName("custom-hr");
   add(hr);

5. Open the application. The HR element does not show any styling from the custom class.
6. Inspect the resulting CSS/HTML. The .custom-hr class is empty or completely missing from the generated CSS.
7. This remains true even after a full build or server/application restart.

Versions

• Vaadin / Flow version: 25.0.2
• Tailwind CSS: (as shipped with Vaadin 25.0.2)
• Node.js: 24.12.0 (LTS)
• Java version: 21 LTS
• IDE: IntelliJ IDEA 2025.3.1

[alexweirig]

Hello Vaadin team,

indeed, I just noticed the same issue in my Vaadin 25 project using Aura theme.

Alex