Put components into an extra layer when using the legacy JS API

[philipp-spiess]

This PR changes the way how legacy JS addComponents() and matchComponents() CSS is handled. In v3, these were conceptually added to the @layer components so that each utility defined in @layer utility is able to overwrite it.

In order to improve backwards compatibility, this PR tries to recreate the same behavior by relying on layer nesting. This means that as far as core is concerned, there is still only one utility layer, however utilities added via these APIs will now create a nested @layer components. Since all utilities that are in the @layer utilities alone will have have a higher presedenc than the components defined in @layer utilities.components, this will emulate the legacy behavior.

Test plan

• Added unit tests
• Added a UI test to ensure the layers are resolved correctly

[philipp-spiess]

This approach has several issues:

• It will break preflight if a user opts-in to use tailwind with no layers at all: https://play.tailwindcss.com/JaTFeaW08M?file=css
• It will put hover:my-component into the components layer as well when in v3 this would be able to overwrite other utilities: https://play.tailwindcss.com/WTtfZ9ogPc

Another "quick fix" that was considered is to use the --tw-sort property but even that isn't working unfortunately due to that screwing up the order then. Seems like the only way to properly fix is is to require additional core changes.