Implement negative outline offsets (#9136)

* Implement negative outline offsets * Update changelog
tailwindlabs · Aug 19, 2022 · 9d495b9 · 9d495b9
1 parent 720be91
commit 9d495b9
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 1 deletion.
diff --git a/CHANGELOG.md b/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
 

diff --git a/src/corePlugins.js b/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 }) => {

diff --git a/tests/basic-usage.test.css b/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;
 }

diff --git a/tests/basic-usage.test.html b/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>