Enable plugins to rename layer names

[Freymaurer]

Based on my comment on another discussion (link). For context, i am working on a component library using the new vite tailwind plugin.

If you export tailwind 4 css into a tailwind 3 project (even with prefix) it throws due to: @layer base is used but no matching @tailwind base directive is present..

The recommended workaround is to rename the layers as detailed here.

In my case this looks like this:

@layer swt-theme, swt-base, swt-components, swt-utilities;
@import "tailwindcss/theme.css" layer(swt-theme) prefix(swt);
@import "tailwindcss/preflight.css" layer(swt-base) prefix(swt);
@import "tailwindcss/utilities.css" layer(swt-utilities) prefix(swt);

@plugin "daisyui" {
    themes: all;
}

In addition to tailwind i use daisyui 5 (compatible with tailwind 4). Because of the daisyui plugin, the final .css file still contains references to @layer base resulting in @layer base is used but no matching @tailwind base directive is present.

I reported this as issue with a tailwind play link, but it seems that this issue cannot be adressed by the author of daisyui.

I quote:

I understand.
Unfortunately, it's not possible yet to use another layer name due to Tailwind CSS plugin API.
Tailwind CSS provides APIs like addBase, addComponents, addUtilities
addBase always adds styles to Tailwind's predefined @layer base and addComponents, addUtilities always add styles to Tailwind's predefined @layer utilities.

If Tailwind provides more access regarding this behavior, we may be able to provide an option as well.

I hope that you can provide a way for plugin provider to either customize layer names or to correctly propagate any name changes in the tailwind config to the plugins.

This issue currently forces me to update the css file by hand before publishing, so it is really annoying 😅

Thanks for your time, reading this!