Implement negative outline offsets (tailwindlabs#9136)

* Implement negative outline offsets

* Update changelog

Author: wongjn

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for configuring default `font-feature-settings` for a font family ([#9039](https://github.com/tailwindlabs/tailwindcss/pull/9039))
 - Add a standalone CLI build for 32-bit Linux on ARM (`node16-linux-armv7`) ([#9084](https://github.com/tailwindlabs/tailwindcss/pull/9084))
 - Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
+- Add negative value support for `outline-offset` ([#9136](https://github.com/tailwindlabs/tailwindcss/pull/9136))
 
 ### Fixed
 

src/corePlugins.js

@@ -1990,6 +1990,7 @@ export let corePlugins = {
 
   outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
     type: ['length', 'number', 'percentage'],
+    supportsNegativeValues: true,
   }),
 
   outlineColor: ({ matchUtilities, theme }) => {

tests/basic-usage.test.css

@@ -907,6 +907,9 @@
 .outline-offset-2 {
   outline-offset: 2px;
 }
+.-outline-offset-2 {
+  outline-offset: -2px;
+}
 .outline-black {
   outline-color: #000;
 }

tests/basic-usage.test.html

@@ -98,7 +98,7 @@
     <div class="bg-blend-darken bg-blend-difference"></div>
     <div class="mix-blend-multiply mix-blend-saturation"></div>
     <div class="order-last order-2"></div>
-    <div class="outline outline-dashed outline-none outline-black outline-4 outline-offset-2"></div>
+    <div class="outline outline-dashed outline-none outline-black outline-4 outline-offset-2 -outline-offset-2"></div>
     <div class="overflow-hidden"></div>
     <div class="overscroll-contain"></div>
     <div class="p-4 py-2 px-3 pt-1 pr-2 pb-3 pl-4"></div>