Insert @defaults at start of stylesheet

[adamwathan]

Prior to this PR, we'd put all of the @defaults (the CSS variables and stuff) after the base rules. This creates an issue when using optimizeUniversalDefaults with CSS that looks like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input {
    @apply shadow;
  }
}

…because the default shadow stuff ends up after the base input rules, so the generated styles are like this:

input {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
    0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}

input {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

This means all of the actual shadow values for the input are reset and the shadow doesn't work.

Fixes #14426.

Lots of failing tests right because this changes a ton of stuff, albeit in a totally inconsequential way. @thecrypticace if you could update these for me this week that would be a huge help, just banging this fix out quick while the kids are napping 😴

[adamwathan]

This conditional was unnecessary, if you look up at line 94 you can see this code is already inside a block with the exact same conditional.

tailwindcss/src/lib/resolveDefaultsAtRules.js

Line 94 in 818d10a

if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {