Update UI tests for real

Author: adamwathan

packages/tailwindcss/tests/ui.spec.ts

@@ -214,7 +214,7 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) =>
     page,
     html`<div
       id="x"
-      class="shadow-sm shadow-[#f00] inset-shadow inset-shadow-[#0f0] ring ring-[#fff] inset-ring inset-ring-[#00f]"
+      class="shadow-sm shadow-[#f00] inset-shadow-sm inset-shadow-[#0f0] ring ring-[#fff] inset-ring inset-ring-[#00f]"
     ></div>`,
   )
 
@@ -237,7 +237,9 @@ test('shadow colors', async ({ page }) => {
       <div id="b" class="shadow-xl shadow-red"></div>
       <div id="c" class="shadow-[0px_2px_4px] shadow-red"></div>
       <div id="d" class="shadow-sm shadow-red hover:shadow-xl">Hello world</div>
-      <div id="e" class="shadow-smshadow-red hover:shadow-xl hover:shadow-initial">Hello world</div>
+      <div id="e" class="shadow-sm shadow-red hover:shadow-xl hover:shadow-initial">
+        Hello world
+      </div>
     `,
   )
 
@@ -318,13 +320,13 @@ test('inset shadow colors', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
     html`
-      <div id="a" class="inset-shadow-sm inset-shadow-red"></div>
-      <div id="b" class="inset-shadow inset-shadow-red"></div>
+      <div id="a" class="inset-shadow-xs inset-shadow-red"></div>
+      <div id="b" class="inset-shadow-sm inset-shadow-red"></div>
       <div id="c" class="inset-shadow-[0px_3px_6px] inset-shadow-red"></div>
-      <div id="d" class="inset-shadow-sm inset-shadow-red hover:inset-shadow">Hello world</div>
+      <div id="d" class="inset-shadow-xs inset-shadow-red hover:inset-shadow-sm">Hello world</div>
       <div
         id="e"
-        class="inset-shadow-sm inset-shadow-red hover:inset-shadow hover:inset-shadow-initial"
+        class="inset-shadow-xs inset-shadow-red hover:inset-shadow-sm hover:inset-shadow-initial"
       >
         Hello world
       </div>