Add support for addBase in plugins

[thecrypticace]

This PR adds support for addBase in JS plugins which adds styles into the CSS base layer using @layer base. This exists for backwards compatibility with v3 but is not something we will encourage people to use going forward — in v4 it's better to just write these styles in a CSS file.

In v3, @layer base was something we compiled away and was only used for determining where to add some styles in the final CSS, but in v4 we are using native CSS layers. This means that addBase in v4 expects you to have a real @layer base in your final CSS, which you will have as long as you are using @import "tailwindcss" to add Tailwind to your project.

Now something like this works:

function ({ addBase }) {
  addBase({
    'h1': { fontSize: '2em' },
    'h2': { fontSize: '1.5em' },
  })
}

Which will emit the following CSS:

@layer base {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }
}

The only limitation compared to v3 is that there is no way for you to wrap these styles in another custom layer.

In v3 you could do this:

@layer my-base {
  @tailwind base;
}

…and then anything you added with addBase would end up exactly where @tailwind base was in your source CSS.

But in v4 there is no @tailwind base, so there's no way to wrap these styles in @layer my-base like in the example above. All base styles added by plugins are simply appended to the end of the stylesheet but wrapped in @layer base so they behave as if they are co-located with other base styles.

Odds of this impacting anyone are extremely low, but if it proves to be an actual issue I think we could output these styles at the location of an optional @tailwind base rule if we detect it exists.