diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6f3b165..23211fb 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,7 +9,7 @@ jobs:
     name: test
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: bahmutov/npm-install@v1
         with:
           install-command: npm i --legacy-peer-deps
diff --git a/.npmignore b/.npmignore
index f428f92..56736f8 100644
--- a/.npmignore
+++ b/.npmignore
@@ -7,3 +7,5 @@ src/
 tsconfig.json
 tsconfig.cjs.json
 babel.config.js
+.prettierignore
+.prettierrc.json
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..a261f29
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+dist/*
diff --git a/src/ClassParser.ts b/src/ClassParser.ts
index 7dfd081..4263620 100644
--- a/src/ClassParser.ts
+++ b/src/ClassParser.ts
@@ -146,8 +146,8 @@ export default class ClassParser {
           const style = spacing(
             prop,
             spacingDirection,
-            this.isNegative,
             this.rest,
+            this.context,
             this.config.theme?.[prop],
           );
           if (style) return style;
diff --git a/src/__tests__/flex.spec.ts b/src/__tests__/flex.spec.ts
index fd675ab..2796951 100644
--- a/src/__tests__/flex.spec.ts
+++ b/src/__tests__/flex.spec.ts
@@ -15,6 +15,7 @@ describe(`flex grow/shrink`, () => {
     [`grow`, { flexGrow: 1 }],
     [`grow-0`, { flexGrow: 0 }],
     [`grow-33`, { flexGrow: 33 }],
+    [`grow-[33]`, { flexGrow: 33 }],
     [`shrink`, { flexShrink: 1 }],
     [`shrink-0`, { flexShrink: 0 }],
     [`shrink-77`, { flexShrink: 77 }],
diff --git a/src/__tests__/margin.spec.ts b/src/__tests__/margin.spec.ts
index bf13cb8..24f5ad7 100644
--- a/src/__tests__/margin.spec.ts
+++ b/src/__tests__/margin.spec.ts
@@ -3,7 +3,10 @@ import { create } from '../';
 
 describe(`margin`, () => {
   let tw = create();
-  beforeEach(() => (tw = create()));
+  beforeEach(() => {
+    tw = create();
+    tw.setWindowDimensions({ width: 800, height: 600 });
+  });
 
   const cases: Array<[string, Record<string, string | number>]> = [
     [
@@ -31,6 +34,9 @@ describe(`margin`, () => {
     [`mt-px`, { marginTop: 1 }],
     [`ml-[333px]`, { marginLeft: 333 }],
     [`-ml-1`, { marginLeft: -4 }],
+    [`mb-[100vh]`, { marginBottom: 600 }],
+    [`ml-[100vw]`, { marginLeft: 800 }],
+    [`mr-[1vw]`, { marginRight: 8 }],
   ];
 
   test.each(cases)(`tw\`%s\` -> %s`, (utility, expected) => {
diff --git a/src/resolve/flex.ts b/src/resolve/flex.ts
index ec81d05..8b3a239 100644
--- a/src/resolve/flex.ts
+++ b/src/resolve/flex.ts
@@ -8,6 +8,9 @@ export function flexGrowShrink(
   config?: TwTheme['flexGrow'] | TwTheme['flexShrink'],
 ): StyleIR | null {
   value = value.replace(/^-/, ``);
+  if (value[0] === `[` && value.endsWith(`]`)) {
+    value = value.slice(1, -1);
+  }
   const configKey = value === `` ? `DEFAULT` : value;
   const numericValue = Number(config?.[configKey] ?? value);
   if (!Number.isNaN(numericValue)) {
diff --git a/src/resolve/spacing.ts b/src/resolve/spacing.ts
index 2e8f902..e5d4095 100644
--- a/src/resolve/spacing.ts
+++ b/src/resolve/spacing.ts
@@ -1,13 +1,13 @@
 import type { TwTheme } from '../tw-config';
-import type { Direction, StyleIR } from '../types';
+import type { Direction, ParseContext, StyleIR } from '../types';
 import { Unit } from '../types';
 import { parseNumericValue, parseUnconfigged, toStyleVal } from '../helpers';
 
 export default function spacing(
   type: 'margin' | 'padding',
   direction: Direction,
-  isNegative: boolean,
   value: string,
+  context: ParseContext,
   config?: TwTheme['margin'] | TwTheme['padding'],
 ): StyleIR | null {
   let numericValue = ``;
@@ -19,7 +19,7 @@ export default function spacing(
     if (!configValue) {
       const unconfigged = parseUnconfigged(value);
       if (unconfigged && typeof unconfigged === `number`) {
-        return spacingStyle(unconfigged, Unit.px, direction, type);
+        return spacingStyle(unconfigged, Unit.px, direction, type, context);
       }
       return null;
     } else {
@@ -36,12 +36,9 @@ export default function spacing(
     return null;
   }
 
-  let [number, unit] = parsed;
-  if (isNegative) {
-    number = -number;
-  }
+  const [number, unit] = parsed;
 
-  return spacingStyle(number, unit, direction, type);
+  return spacingStyle(number, unit, direction, type, context);
 }
 
 function spacingStyle(
@@ -49,8 +46,9 @@ function spacingStyle(
   unit: Unit,
   direction: Direction,
   type: 'margin' | 'padding',
+  context: ParseContext,
 ): StyleIR | null {
-  const pixels = toStyleVal(number, unit);
+  const pixels = toStyleVal(number, unit, context);
   if (pixels === null) {
     return null;
   }