Hover:bg-custom-color not generated if not used in v4

[francoisbillet]

Hi,

I'm upgrading to Tailwind 4 and I can't seem to fix this issue.
I have a project (used as a component library) exposing theme variables and reusable components.

Let's say its index.css looks something like this :

@import 'tailwindcss';
@theme static {
  --color-used-color: #123456;
  --color-unused-color: #456789;
}

Let's say the library also exposes this Button component:

export const Button = () => {
  return <button className="hover:bg-used-color">Button</button>
}

When I build my library, I notice that .hover\:bg-used-color{&:hover{@media (hover:hover){background-color:var(--color-used-color)}}} is generated, but there's no selector for hover with my other theme color (--color-unused-color).
This is understandable, since Tailwind only generates classes that are actually used. However, in my case, I want to be able to use both hover:bg-used-color and hover:bg-unused-color.

In my front-end application, I import the build css from my library:

@import 'tailwindcss';
@import '@library/library/dist/esm/index.css';

As expected, I can use hover:bg-used-color but not hover:bg-unused-color.
How can I tell Tailwind to generate hover classes for every single one of my theme colors ?

Bonus question: I do not have suggestions anymore with VSCode plugin Tailwind CSS IntelliSense for my theme variables, even for bg-used-color. Do you know why ?

[wongjn]

You could add a comment in the library code for Button:

export const Button = () => {
  /* hover:bg-unused-color */
  return <button className="hover:bg-used-color">Button</button>
}

This isn't any special syntax. Rather, Tailwind scans files as strings so it will naturally pick up hover:bg-unused-color.

[francoisbillet]

I don't want to exhaustively add a comment for every combination of pseudo-class / theme variable.
In v3 I could use hover:bg-unused-color, and in v4 I can't anymore. There must be a way to tell Tailwind to generate every pseudo-class for every theme variable. I tried adding ** static** to @theme, but this only works for CSS variables, not hover, focus and other states

[wongjn]

No, there's no such feature available in v4.

[adamwathan]

This is the same behavior as v3, the class wouldn’t be generated there unless it was used in your code either. Can you provide a reproduction that works in v3 but not in v4?

[francoisbillet]

I found the issue: In the front-end application I imported the built CSS from the library instead of the actual CSS source file.
Replacing @import '@library/library/dist/esm/index.css' by '@library/library/src/index.css' did the trick.

@wongjn & @adamwathan Thank you for your answering my question/issue.

Edit: Turns out I need to import both files (source + built CSS)