Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Units without leading 0s causes shadow color to not work.
**What version of Tailwind CSS are you using?**

3.0.14

**What build tool (or framework if it abstracts the build tool) are you using?**

Play

**What version of Node.js are you using?**

N/A

**What browser are you using?**

Chrome

**What operating system are you using?**

macOS

**Reproduction URL**

https://play.tailwindcss.com/sgiL9df2gw?file=config

**Describe your issue**

When using a value without a leading 0 for a box shadow the color won't be changed.

I took a shot at rewriting `parseBoxShadowValue` to get it to work because it seemed like a fun one to play around with. Ran the tests and it all passed. Didn't want to create a PR incase you had quicker, better fixes.

```js
let KEYWORDS = ['inset', 'inherit', 'initial', 'revert', 'unset']
let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.

function parseBoxShadowValue (input) {
  let shadows = input.split(COMMA)

  return shadows.map(shadow => {
    let value = shadow.trim()
    let parts = value.split(SPACE)
    let output = { raw: value, valid: true }

    // A box-shadow requires at least 3 parts.
    if (parts.length < 3) {
      output.valid = false
      return output
    }

    // The color is always at the end, also a color can't start with a number or a .
    if (/^[\d.]/.test(parts[parts.length - 1])) {
      output.valid = false
      return output
    }

    if (KEYWORDS.includes(parts[0])) {
      output.keyword = parts.shift()
    }

    output.color = parts.pop()
    output.x = parts.shift()
    output.y = parts.shift()
    output.blur = parts.shift()
    output.spread = parts.shift()
    output.unknown = parts

    return output
  })
}
```


Hints:

Patch:
diff --git a/src/util/parseBoxShadowValue.js b/src/util/parseBoxShadowValue.js
--- a/src/util/parseBoxShadowValue.js
+++ b/src/util/parseBoxShadowValue.js
@@ -1,7 +1,7 @@
 let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
 let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
-let LENGTH = /^-?(\d+)(.*?)$/g
+let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
 
 export function parseBoxShadowValue(input) {
   let shadows = input.split(COMMA)


Test patch:
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -137,3 +137,38 @@ it('fasly config values still work', () => {
     `)
   })
 })
+
+it('shadows support values without a leading zero', () => {
+  let config = {
+    content: [{ raw: html`<div class="shadow-one shadow-two"></div>` }],
+    theme: {
+      boxShadow: {
+        one: '0.5rem 0.5rem 0.5rem #0005',
+        two: '.5rem .5rem .5rem #0005',
+      },
+    },
+    plugins: [],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .shadow-one {
+        --tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
+        --tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+          var(--tw-shadow);
+      }
+      .shadow-two {
+        --tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
+        --tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+          var(--tw-shadow);
+      }
+    `)
+  })
+})