Important strategy with a target

[merijnponzo]

I added '#app' to the config's 'important' property but it doesn't seem to generate #app .p-4 for example.

It's also possible tw4 removed this feature entirely
https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier

Do you have any insights on this?

I'm sure

@import "tailwindcss" important;

Will work

[jlukic]

Thanks for reporting this! The important selector still exists in Tailwind v4, but it works differently now.

I've updated the README with clearer API documentation to make this more obvious, as well as some information about tailwind v4.

Since this package uses Tailwind v4 (Oxide engine), configuration is done through CSS instead of JavaScript
config files. The important property from tailwind.config.js is no longer used.

Instead, pass it through the importCSS parameter:

const css = await generateTailwindCSS({
  content: '<div class="p-4">Hello</div>',
  importCSS: '@import "tailwindcss" important(#app);'
});

This will generate CSS with the #app selector prefix as expected:

#app .p-4 {
  padding: 1rem;
}

Tailwind v4 moved all configuration to CSS-based directives, so JavaScript config files are obsolete. The @import
"tailwindcss" important syntax is the new way to handle this.