I am trying to get autocomplete for Lumo utility class to work with IntellJ (tried VS Code also)

It is imported in theme.json:

"lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ]

Have also tried:

import '@vaadin/vaadin-lumo-styles/utility.js';

Is it possible?

I haven’t been able to get it working unfortunately. Let me know if you have any luck

I think there is no meta info in any suitable place that it could possibly work now.

But I would assume something like that is technically possible with some effort. E.g. there is VS Code plugin for Tailwind which does this, i.e. adds autocompletion for CSS class names.

Interestingly enough, I do get autocomplete for the classnames in IntelliJ

I created css from from Vaadin js files. Works in IntelliJ https://github.com/sveine/vaadin-small-business-starter/blob/5d4d3e1c2b3c045003a506fbbbca25e388e60255/core-module/frontend-lib/ide/autocomplete/README.md. How did you configure Tailwind CSS (tailwind.config.js) in IntelliJ @secure-leopard ?

I didn’t configure tailwind. IntelliJ just indexed the lumo utility class css files automatically

I cannot find a css file by Vaadin, only js files in node_modules/@vaadin/vaadin-lumo-styles/utilities. Can intelliJ index them?

Yes, it seemed to find them somehow

If you find out how please tell me. I have tried to copy all files in utilities to my project, added them to JavaScript Libraries, include then in my Lit view. Does not work. Tried Google… Maybe you have a Plugin I don’t have?

Well, the legacy NPM package (https://github.com/anezthes/lumo-css-framework) was using CSS files, which was used in start.vaadin.com projects at some point.
Currently you would need to extract the styles into a separate CSS file that IntelliJ indexes.

Wrote a small script to generate a CSS file containing custom CSS property and utility class declarations. Script and resulting CSS can be found here: https://gist.github.com/sissbruecker/75769012afebb29db1809808ec9767fd


Seems to be fixed by Vaadin in some release