Support negatable utilities

plugin/src/index.ts

@@ -83,9 +83,35 @@ function getFluidAPI(
 					{
 						...options,
 						values,
-						supportsNegativeValues: false, // b/c Tailwind only negates the value, not the modifier
-						respectPrefix: false, // we add it manually, for better ordering
-						modifiers
+						modifiers,
+						supportsNegativeValues: false, // we add it manually, to override Tailwind's default behavior of only negating the value (not the modifier)
+						respectPrefix: false // we add it manually, for better ordering
+					}
+				)
+
+				if (!options?.supportsNegativeValues) return
+
+				orig(
+					{
+						[`~-${context.prefix}${util}`](start, { modifier: end }) {
+							// See note about default modifiers above
+							if (end === null && DEFAULT) end = DEFAULT
+
+							try {
+								const clamp = expr.generate(start, end, context, { negate: true })
+								return origFn(clamp, { modifier: null }) // don't pass along the modifier
+							} catch (e) {
+								handle(e, `~-${util}`)
+								return null
+							}
+						}
+					},
+					{
+						...options,
+						values,
+						modifiers,
+						supportsNegativeValues: false,
+						respectPrefix: false
 					}
 				)
 			})

plugin/src/util/expr.ts

@@ -41,13 +41,15 @@ export const generate = (
 		endBP: _endBP,
 		atContainer,
 		type = false,
-		final = false
+		final = false,
+		negate = false
 	}: {
 		startBP?: RawValue | Length
 		endBP?: RawValue | Length
 		atContainer?: string | true
 		type?: boolean
 		final?: boolean
+		negate?: boolean
 	} = {}
 ) => {
 	if (!_start) error('missing-start')
@@ -68,6 +70,11 @@ export const generate = (
 
 	if (start.number === end.number) error('no-change', start)
 
+	if (negate) {
+		start.number *= -1
+		end.number *= -1
+	}
+
 	const comment = <C extends keyof typeof codes>(
 		code?: C,
 		...args: typeof code extends undefined ? never : Parameters<(typeof codes)[C]>

plugin/tests/index.test.ts

@@ -98,6 +98,36 @@ it(`handles zeroed values`, async () => {
 	`)
 })
 
+it(`negates utilities that support negatives`, async () => {
+	const result = await run({
+		content: [
+			{
+				raw: html`<div class="~-mt-1/2"></div>`
+			}
+		]
+	})
+	expect(result.css).toMatchFormattedCss(css`
+		.\~-mt-1\/2 {
+			margin-top: clamp(
+				-0.5rem,
+				-0.07rem + -0.45vw,
+				-0.25rem
+			); /* fluid from -0.25rem at 40rem to -0.5rem at 96rem */
+		}
+	`)
+})
+
+it(`doesn't negate utilities that don't support negatives`, async () => {
+	const result = await run({
+		content: [
+			{
+				raw: html`<div class="~-p-1/2"></div>`
+			}
+		]
+	})
+	expect(result.css).toMatchFormattedCss(css``)
+})
+
 it(`respects DEFAULT from value`, async () => {
 	const result = await run({
 		content: [

site/pages/index.mdx

@@ -175,16 +175,6 @@ export default {
 }
 ```
 
-### Negative values
-
-You can't use the dash prefix `-` to negate fluid utilities like you
-can with i.e. `-mt-3`, because Tailwind would only negate the start value.
-
-<Tip.Bad>Trying to use `-` to negate a fluid utility</Tip.Bad>
-```html del=/(\-)\~/
-<div class="-~mt-3/5">
-```
-
 ## Configuration
 
 ### Custom default screens
@@ -249,6 +239,15 @@ If you want to set an arbitrary start screen with the `~` variant, you have to u
 <div class="~min-[20rem]/lg:~text-base/4xl">
 ```
 
+### Negative values
+
+To negate fluid utilities, the dash comes after the fluid `~` prefix:
+
+<Tip.Good>Negating a fluid utility</Tip.Good>
+```html mark=/\~(\-)/
+<div class="~-mt-3/5">
+```
+
 ### Container queries
 
 If you have the [official container query](https://github.com/tailwindlabs/tailwindcss-container-queries) plugin