Insert always on defaults layer in correct spot (tailwindlabs#6526)

* insert in correct spot

We were injecting the always on `@tailwind defaults` layer at the beginning of
the file. However, if a `@tailwind base` layer is available, then that
will now be injected _after_ the defaults layer. The base layer does
contain some reset that are now overriding the defaults we set.

So now we will:
- Insert the `@tailwind defaults` layer at the beginning of the file
  _if_ there is no `@tailwind base`
- Insert the `@tailwind defaults` layer after the `@tailwind base` layer
  if it exists.

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Insert always on defaults layer in correct spot ([#6526](https://github.com/tailwindlabs/tailwindcss/pull/6526))
 
 ## [3.0.3] - 2021-12-15
 

src/lib/expandTailwindAtRules.js

@@ -221,15 +221,22 @@ export default function expandTailwindAtRules(context) {
 
     // Replace any Tailwind directives with generated CSS
 
+    if (layerNodes.base) {
+      layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
+    }
+
     // @defaults rules are unconditionally added first to ensure that
     // using any utility that relies on defaults will work even when
     // compiled in an isolated environment like CSS modules
     if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
-      root.prepend(cloneNodes([...defaultNodes], root.source))
+      if (layerNodes.base) {
+        layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
+      } else {
+        root.prepend(cloneNodes([...defaultNodes], root.source))
+      }
     }
 
     if (layerNodes.base) {
-      layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
       layerNodes.base.remove()
     }
 

tests/kitchen-sink.test.css

@@ -1,38 +1,3 @@
-.scale-50,
-.transform,
-.hover\:scale-75 {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.shadow-sm,
-.shadow-md,
-.hover\:shadow-lg,
-.md\:shadow-sm {
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-}
-
-.focus\:ring-2 {
-  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-}
 .theme-test {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
@@ -171,6 +136,41 @@ h1:first-child {
 div {
   background: #654321;
 }
+.scale-50,
+.transform,
+.hover\:scale-75 {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.shadow-sm,
+.shadow-md,
+.hover\:shadow-lg,
+.md\:shadow-sm {
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+}
+
+.focus\:ring-2 {
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+}
 .container {
   width: 100%;
 }