feat: support divide, space & gap

__tests__/tailwindcss/divide-width.ts

@@ -1,9 +1,10 @@
-import { expectError, tailwindRunner } from "./runner";
+import { tailwindRunner } from "./runner";
 
-const scenarios = [0, 2, 4, 8];
+// const scenarios = [0, 2, 4, 8];
 
 tailwindRunner("Border - Divide Width", [
-  ...expectError(scenarios.map((n) => `divide-x-${n}`)),
+  ["divide-x-2", { styles: {} }],
-  ...expectError(scenarios.map((n) => `divide-y-${n}`)),
+  // ...expectError(scenarios.map((n) => `divide-x-${n}`)),
-  ...expectError(["divide-x-reverse", "divide-y-reverse"]),
+  // ...expectError(scenarios.map((n) => `divide-y-${n}`)),
+  // ...expectError(["divide-x-reverse", "divide-y-reverse"]),
 ]);

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tailwindcss-react-native",
-  "version": "1.0.0-2",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "tailwindcss-react-native",
-      "version": "1.0.0-2",
+      "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "7.17.10",
@@ -17,7 +17,8 @@
         "postcss": "^8.4.12",
         "postcss-calc": "^8.2.4",
         "postcss-color-functional-notation": "^4.2.2",
-        "postcss-css-variables": "^0.18.0"
+        "postcss-css-variables": "^0.18.0",
+        "react-is": "^18.1.0"
       },
       "devDependencies": {
         "@babel/core": "7.17.10",
@@ -33,6 +34,7 @@
         "@types/jest": "27.5.0",
         "@types/micromatch": "4.0.2",
         "@types/react": "18.0.9",
+        "@types/react-is": "^17.0.3",
         "@types/react-native": "0.67.6",
         "@types/tailwindcss": "3.0.10",
         "@typescript-eslint/eslint-plugin": "5.23.0",
@@ -2978,12 +2980,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@jest/core/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/@jest/core/node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -5778,6 +5774,12 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/@types/jest/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
     "node_modules/@types/jsdom": {
       "version": "16.2.14",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.14.tgz",
@@ -5857,6 +5859,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-native": {
       "version": "0.67.6",
       "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.67.6.tgz",
@@ -9466,12 +9477,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/expect/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/expect/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -9855,20 +9860,6 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -11324,12 +11315,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-circus/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/jest-circus/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -11542,12 +11527,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-cli/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/jest-cli/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -11801,12 +11780,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-config/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/jest-config/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -11927,6 +11900,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/jest-diff/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
     "node_modules/jest-diff/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12110,12 +12089,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-each/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/jest-each/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12524,12 +12497,6 @@
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
       }
     },
-    "node_modules/jest-leak-detector/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/jest-matcher-utils": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
@@ -12638,6 +12605,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/jest-matcher-utils/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
     "node_modules/jest-matcher-utils/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12781,12 +12754,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-message-util/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/jest-message-util/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -13199,12 +13166,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-resolve/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/jest-resolve/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -14096,12 +14057,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-snapshot/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/jest-snapshot/node_modules/semver": {
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
@@ -17369,6 +17324,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
     "node_modules/pretty-format/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -17584,10 +17545,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "17.0.2",
+      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
-      "dev": true
     },
     "node_modules/react-native": {
       "version": "0.68.2",
@@ -17697,6 +17657,12 @@
         "react": "^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/react-shallow-renderer/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
     "node_modules/react-test-renderer": {
       "version": "18.1.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.1.0.tgz",
@@ -17711,12 +17677,6 @@
         "react": "^18.1.0"
       }
     },
-    "node_modules/react-test-renderer/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true
-    },
     "node_modules/react-test-renderer/node_modules/react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -22384,12 +22344,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "rimraf": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -24571,6 +24525,12 @@
             "ansi-styles": "^5.0.0",
             "react-is": "^17.0.1"
           }
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
         }
       }
     },
@@ -24653,6 +24613,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-native": {
       "version": "0.67.6",
       "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.67.6.tgz",
@@ -27375,12 +27344,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -27704,13 +27667,6 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
-    "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "optional": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -28796,12 +28752,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -28962,12 +28912,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -29156,12 +29100,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -29250,6 +29188,12 @@
             }
           }
         },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -29392,12 +29336,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -29715,12 +29653,6 @@
             "ansi-styles": "^5.0.0",
             "react-is": "^18.0.0"
           }
-        },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
         }
       }
     },
@@ -29801,6 +29733,12 @@
             }
           }
         },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -29912,12 +29850,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -30213,12 +30145,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -30929,12 +30855,6 @@
             }
           }
         },
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "semver": {
           "version": "7.3.7",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
@@ -33474,6 +33394,12 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -33633,10 +33559,9 @@
       }
     },
     "react-is": {
-      "version": "17.0.2",
+      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
-      "dev": true
     },
     "react-native": {
       "version": "0.68.2",
@@ -33725,6 +33650,14 @@
       "requires": {
         "object-assign": "^4.1.1",
         "react-is": "^16.12.0 || ^17.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        }
       }
     },
     "react-test-renderer": {
@@ -33738,12 +33671,6 @@
         "scheduler": "^0.22.0"
       },
       "dependencies": {
-        "react-is": {
-          "version": "18.1.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-          "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-          "dev": true
-        },
         "react-shallow-renderer": {
           "version": "16.15.0",
           "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",

package.json

@@ -53,7 +53,8 @@
     "postcss": "^8.4.12",
     "postcss-calc": "^8.2.4",
     "postcss-color-functional-notation": "^4.2.2",
-    "postcss-css-variables": "^0.18.0"
+    "postcss-css-variables": "^0.18.0",
+    "react-is": "^18.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.17.10",
@@ -69,6 +70,7 @@
     "@types/jest": "27.5.0",
     "@types/micromatch": "4.0.2",
     "@types/react": "18.0.9",
+    "@types/react-is": "^17.0.3",
     "@types/react-native": "0.67.6",
     "@types/tailwindcss": "3.0.10",
     "@typescript-eslint/eslint-plugin": "5.23.0",

src/plugin/LICENSE

@@ -0,0 +1,23 @@
+Sections of this code were originally developed by Tailwind Labs (https://github.com/tailwindlabs/tailwindcss)
+
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/plugin/native/divide.ts

@@ -1,50 +1,108 @@
 import { CustomPluginFunction } from "./types";
-import { flattenColorPalette } from "./utils";
+import withAlphaVariable from "tailwindcss/lib/util/withAlphaVariable";
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
+import toColorValue from "tailwindcss/lib/util/toColorValue";
+
+export const divide: CustomPluginFunction = ({
+  matchUtilities,
+  theme,
+  addUtilities,
+  ...other
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { corePlugins } = other as any;
 
-export const divide: CustomPluginFunction = (
-  { matchUtilities, theme },
-  notSupported
-) => {
   matchUtilities(
     {
-      "divide-x": notSupported("divide-x"),
+      "divide-x": (value: string) => {
-      "divide-y": notSupported("divide-y"),
+        value = value === "0" ? "0px" : value;
+
+        return {
+          "&": {
+            "@media --general-sibling-combinator": {
+              // "@defaults border-width": {},
+              "--tw-divide-x-reverse": "0",
+              "border-right-width": `calc(${value} * var(--tw-divide-x-reverse))`,
+              "border-left-width": `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
+            },
+          },
+        };
+      },
+      "divide-y": (value: string) => {
+        value = value === "0" ? "0px" : value;
+
+        return {
+          "&": {
+            "@media --general-sibling-combinator": {
+              // "@defaults border-width": {},
+              "--tw-divide-y-reverse": "0",
+              "border-top-width": `calc(${value} * var(--tw-divide-y-reverse))`,
+              "border-bottom-width": `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
+            },
+          },
+        };
+      },
     },
-    {
+    { values: theme("divideWidth"), type: ["line-width", "length"] }
-      values: { ...theme("space"), reverse: 0 },
-      supportsNegativeValues: true,
-    }
   );
 
   matchUtilities(
     {
-      divide: notSupported("divide"),
+      divide: (value: string) => {
+        if (!corePlugins("divideOpacity")) {
+          return {
+            "&": {
+              "@media --general-sibling-combinator": {
+                "border-color": toColorValue(value),
+              },
+            },
+          };
+        }
+
+        return {
+          "&": {
+            "@media --general-sibling-combinator": withAlphaVariable({
+              color: value,
+              property: "border-color",
+              variable: "--tw-divide-opacity",
+            }),
+          },
+        };
+      },
     },
     {
-      values: flattenColorPalette(theme("divideColor")),
+      values: (({ DEFAULT: _, ...colors }) => colors)(
+        flattenColorPalette(theme("divideColor"))
+      ),
       type: "color",
     }
   );
 
-  matchUtilities(
+  addUtilities({
-    {
+    ".divide-solid": {
-      "divide-opacity": notSupported("divide-opacity"),
+      "@media --general-sibling-combinator": {
-    },
+        "border-style": "solid",
-    { values: theme("divideOpacity") }
-  );
-
-  matchUtilities(
-    {
-      divide: notSupported("divide-style"),
-    },
-    {
-      values: {
-        solid: "solid",
-        dashed: "dashed",
-        dotted: "dotted",
-        double: "double",
-        none: "none",
       },
-    }
+    },
-  );
+    ".divide-dashed": {
+      "@media --general-sibling-combinator": {
+        "border-style": "dashed",
+      },
+    },
+    ".divide-dotted": {
+      "@media --general-sibling-combinator": {
+        "border-style": "dotted",
+      },
+    },
+    ".divide-double": {
+      "@media --general-sibling-combinator": {
+        "border-style": "double",
+      },
+    },
+    ".divide-none": {
+      "@media --general-sibling-combinator": {
+        "border-style": "none",
+      },
+    },
+  });
 };

src/plugin/native/gap.ts

@@ -0,0 +1,52 @@
+import { CustomPluginFunction } from "./types";
+
+export const gap: CustomPluginFunction = ({ matchUtilities, theme }) => {
+  matchUtilities(
+    {
+      gap: (value: string) => {
+        value = value === "0" ? "0px" : value;
+        value = value === "px" ? "1px" : value;
+
+        return {
+          "&": {
+            margin: `calc(${value} / -2)`,
+            "@media --general-sibling-combinator": {
+              margin: `calc(${value} / 2)`,
+            },
+          },
+        };
+      },
+      "gap-x": (value: string) => {
+        value = value === "0" ? "0px" : value;
+        value = value === "px" ? "1px" : value;
+
+        return {
+          "&": {
+            "margin-left": `calc(${value} / -2)`,
+            "margin-rigth": `calc(${value} / -2)`,
+            "@media --general-sibling-combinator": {
+              "margin-left": `calc(${value} / 2)`,
+              "margin-right": `calc(${value} / 2)`,
+            },
+          },
+        };
+      },
+      "gap-y": (value: string) => {
+        value = value === "0" ? "0px" : value;
+        value = value === "px" ? "1px" : value;
+
+        return {
+          "&": {
+            "margin-top": `calc(${value} / -2)`,
+            "margin-bottom": `calc(${value} / -2)`,
+            "@media --general-sibling-combinator": {
+              "margin-top": `calc(${value} / 2)`,
+              "margin-bottom": `calc(${value} / 2)`,
+            },
+          },
+        };
+      },
+    },
+    { values: theme("gap") }
+  );
+};

src/plugin/native/index.ts

@@ -197,6 +197,7 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
         skew: false,
         translate: false,
         boxShadow: false,
+        gap: false,
       },
     };
 

src/plugin/native/space.ts

@@ -1,17 +1,52 @@
 import { CustomPluginFunction } from "./types";
 
-export const space: CustomPluginFunction = (
+export const space: CustomPluginFunction = ({
-  { matchUtilities, theme },
+  matchUtilities,
-  notSupported
+  theme,
-) => {
+  addUtilities,
+}) => {
   matchUtilities(
     {
-      "space-x": notSupported("space-x"),
+      "space-x": (value: string) => {
-      "space-y": notSupported("space-y"),
+        value = value === "0" ? "0px" : value;
+
+        return {
+          "&": {
+            "@media --general-sibling-combinator": {
+              "--tw-space-x-reverse": "0",
+              "margin-right": `calc(${value} * var(--tw-space-x-reverse))`,
+              "margin-left": `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
+            },
+          },
+        };
+      },
+      "space-y": (value: string) => {
+        value = value === "0" ? "0px" : value;
+
+        return {
+          "&": {
+            "@media --general-sibling-combinator": {
+              "--tw-space-y-reverse": "0",
+              "margin-top": `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
+              "margin-bottom": `calc(${value} * var(--tw-space-y-reverse))`,
+            },
+          },
+        };
+      },
     },
-    {
+    { values: theme("space"), supportsNegativeValues: true }
-      values: { ...theme("space"), reverse: 0 },
-      supportsNegativeValues: true,
-    }
   );
+
+  addUtilities({
+    ".space-y-reverse": {
+      "@media --general-sibling-combinator": {
+        "--tw-space-y-reverse": "1",
+      },
+    },
+    ".space-x-reverse": {
+      "@media --general-sibling-combinator": {
+        "--tw-space-x-reverse": "1",
+      },
+    },
+  });
 };

src/plugin/native/utils.ts

@@ -7,15 +7,3 @@ export function isPlainObject(value: unknown): value is Object {
   const prototype = Object.getPrototypeOf(value);
   return prototype === null || prototype === Object.prototype;
 }
-
-export const flattenColorPalette = (colors: object): Record<string, unknown> =>
-  Object.assign(
-    {},
-    ...Object.entries(colors ?? {}).flatMap(([color, values]) =>
-      typeof values == "object"
-        ? Object.entries(flattenColorPalette(values)).map(([number, hex]) => ({
-            [color + (number === "DEFAULT" ? "" : `-${number}`)]: hex,
-          }))
-        : [{ [`${color}`]: values }]
-    )
-  );

src/postcss/plugin.ts

@@ -66,20 +66,21 @@ export const plugin: PluginCreator<PostcssPluginOptions> = ({
             return;
           }
 
-          if (node.parent?.[mediaStringSymbol]) {
+          for (const s of node.selectors) {
-            // The parent has a media query, so this needs to be added a media style
+            if (node.parent?.[mediaStringSymbol]) {
-            for (const s of node.selectors) {
+              // The parent has a media query, so this needs to be added a media style
               const selector = normaliseSelector(s, { important });
+              const mediaQuery = node.parent[mediaStringSymbol];
 
               media[selector] ??= [];
               styles[`${selector}.${media[selector].length}`] = declarations;
-              media[selector].push(node.parent[mediaStringSymbol]);
+              media[selector].push(mediaQuery);
-            }
+            } else {
-          } else {
+              // The parent is the root, so we are not in a media query
-            // The parent is the root, so we are not in a media query
+              for (const s of node.selectors) {
-            for (const s of node.selectors) {
+                const selector = normaliseSelector(s, { important });
-              const selector = normaliseSelector(s, { important });
+                styles[selector] = { ...styles[selector], ...declarations };
-              styles[selector] = { ...styles[selector], ...declarations };
+              }
             }
           }
         }

src/shared/selector.ts

@@ -9,6 +9,8 @@ export function normaliseSelector(
   selector: string,
   { important }: Partial<TailwindConfig> = {}
 ) {
+  if (selector.startsWith("--")) return selector.slice(2);
+
   const leadingDots = "^\\.";
   const nonWordCharactersExceptDash = new RegExp("[^a-zA-Z0-9-]+", "g");
 

src/styled.tsx

@@ -1,12 +1,27 @@
-import { createElement, FunctionComponent, ComponentClass } from "react";
+import {
+  createElement,
+  FunctionComponent,
+  ComponentClass,
+  PropsWithChildren,
+  Children,
+  cloneElement,
+} from "react";
 import { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { useTailwind } from "./use-tailwind";
+import { ChildClassNameSymbol } from "./utils/child-styles";
+import { isFragment } from "react-is";
 
-type StyledProps<P> = P & {
+const isStyled = Symbol("styled");
-  className?: string;
+
-  tw?: string;
+type StyledProps<P> = PropsWithChildren<
-  style?: StyleProp<ViewStyle | TextStyle | ImageStyle>;
+  P & {
-};
+    className?: string;
+    inheritedClassName?: string;
+    nthChild?: number;
+    tw?: string;
+    style?: StyleProp<ViewStyle | TextStyle | ImageStyle>;
+  }
+>;
 
 type Component<P> = string | FunctionComponent<P> | ComponentClass<P>;
 
@@ -16,16 +31,40 @@ export function styled<P>(
   function Styled({
     className,
     tw,
+    inheritedClassName,
+    nthChild,
     style: styleProperty,
+    children: componentChildren,
     ...props
   }: StyledProps<P>) {
-    const tailwindStyleIds = useTailwind()(tw ?? className);
+    const tailwindStyles = useTailwind({
+      nthChild,
+      [ChildClassNameSymbol]: inheritedClassName,
+    })(tw ?? className);
 
     const style = styleProperty
-      ? [tailwindStyleIds, styleProperty]
+      ? [tailwindStyles, styleProperty]
-      : tailwindStyleIds;
+      : tailwindStyles;
 
-    return createElement(Component, { ...props, style } as unknown as P);
+    let children = isFragment(componentChildren)
+      ? // This probably needs to be recursive
+        componentChildren.props.children
+      : componentChildren;
+
+    if (tailwindStyles[ChildClassNameSymbol]) {
+      children = Children.map(children, (child, index) => {
+        return cloneElement(child, {
+          nthChild: index,
+          inheritedClassName: tailwindStyles[ChildClassNameSymbol],
+        });
+      });
+    }
+
+    return createElement(Component, {
+      ...props,
+      style,
+      children,
+    } as unknown as P);
   }
 
   if (typeof Component !== "string") {

src/types/node-modules.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 declare module "postcss-css-variables" {
   export default unknown;
 }
@@ -15,3 +16,18 @@ declare module "css-mediaquery" {
     values: Partial<MediaValues> & { type: string }
   ): boolean;
 }
+
+/**
+ * Tailwindcss internal functions
+ */
+declare module "tailwindcss/lib/util/withAlphaVariable" {
+  export default function (options: unknown): any;
+}
+
+declare module "tailwindcss/lib/util/flattenColorPalette" {
+  export default function (options: unknown): any;
+}
+
+declare module "tailwindcss/lib/util/toColorValue" {
+  export default function (options: unknown): any;
+}

src/use-tailwind.native.ts

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import {
   TextStyle,
   ViewStyle,
@@ -6,7 +6,7 @@ import {
   ImageStyle,
   Platform,
 } from "react-native";
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { match } from "css-mediaquery";
 import { normaliseSelector } from "./shared/selector";
 import { TailwindContext } from "./context";
@@ -16,6 +16,8 @@ import {
   UseTailwindOptions,
 } from "./use-tailwind";
 
+import { ChildClassNameSymbol } from "./utils/child-styles";
+
 export function useTailwind<P extends ViewStyle>(
   options?: UseTailwindOptions
 ): UseTailwindCallback<P>;
@@ -28,7 +30,7 @@ export function useTailwind<P extends ImageStyle>(
 export function useTailwind<P extends RWNCssStyle>(
   options?: UseTailwindOptions
 ): UseTailwindCallback<P>;
-export function useTailwind<P>({ siblingClassName = "" } = {}) {
+export function useTailwind<P>(options: UseTailwindOptions = {}) {
   const {
     platform,
     styles,
@@ -38,6 +40,8 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
     orientation,
     colorScheme,
   } = useContext(TailwindContext);
+  let [nthChild] = useState(options.nthChild ?? 0);
+  const inheritedClassNames = options[ChildClassNameSymbol] ?? "";
 
   if (!platform) {
     throw new Error(
@@ -46,11 +50,27 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
   }
 
   return (className = "") => {
-    let tailwindStyles = {} as P;
+    let tailwindStyles = {} as P & {
+      [ChildClassNameSymbol]?: string;
+    };
     const transforms: ViewStyle["transform"] = [];
+    let childStyles = "";
+    nthChild++;
 
-    for (const name of `${siblingClassName} ${className}`.trim().split(" ")) {
+    for (const name of `${inheritedClassNames} ${className}`
-      const selector = normaliseSelector(name);
+      .trim()
+      .split(/\s+/)) {
+      let selector = normaliseSelector(name);
+
+      if (name.startsWith("--")) {
+        const [mediaQuery, ...selectorParts] = name.split(".");
+
+        if (mediaQuery === "--general-sibling-combinator" && nthChild === 1) {
+          continue;
+        }
+
+        selector = selectorParts.join(".");
+      }
 
       if (styles[selector]) {
         const { transform, ...rest } = styles[selector];
@@ -71,29 +91,34 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
       }
 
       for (let index = 0, length = rules.length; index < length; index++) {
-        const isMatch = match(rules[index], {
+        const mediaQuery = rules[index];
-          "aspect-ratio": width / height,
+        if (mediaQuery.startsWith("--")) {
-          "device-aspect-ratio": width / height,
+          childStyles += ` ${mediaQuery}.${selector}.${index}`;
-          type: platform,
+        } else {
-          width,
+          const isMatch = match(rules[index], {
-          height,
+            "aspect-ratio": width / height,
-          "device-width": width,
+            "device-aspect-ratio": width / height,
-          "device-height": width,
+            type: platform,
-          orientation,
+            width,
-          "prefers-color-scheme": colorScheme,
+            height,
-        });
+            "device-width": width,
+            "device-height": width,
+            orientation,
+            "prefers-color-scheme": colorScheme,
+          });
 
-        const { transform, ...rest } = styles[`${selector}.${index}`];
+          const { transform, ...rest } = styles[`${selector}.${index}`];
 
-        if (isMatch) {
+          if (isMatch) {
-          tailwindStyles = {
+            tailwindStyles = {
-            ...tailwindStyles,
+              ...tailwindStyles,
-            ...rest,
+              ...rest,
-          };
+            };
-        }
+          }
 
-        if (transform) {
+          if (transform) {
-          transforms.push(...transform);
+            transforms.push(...transform);
+          }
         }
       }
     }
@@ -103,6 +128,8 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
       (tailwindStyles as any).transform = transforms;
     }
 
+    tailwindStyles[ChildClassNameSymbol] = childStyles;
+
     return Platform.OS === "web"
       ? StyleSheet.flatten(tailwindStyles) // RNW <=0.17 still uses ReactNativePropRegistry
       : tailwindStyles;

src/use-tailwind.ts

@@ -1,4 +1,5 @@
 import { StyleProp } from "react-native";
+import { ChildClassNameSymbol } from "./utils/child-styles";
 
 export { useTailwind } from "./use-tailwind.web";
 
@@ -7,8 +8,12 @@ export type RWNCssStyle = {
   tailwindClassName: string;
 };
 
-export type UseTailwindCallback<P> = (className?: string) => StyleProp<P> & P;
+export type UseTailwindCallback<P> = (className?: string) => StyleProp<P> &
+  P & {
+    [ChildClassNameSymbol]?: string;
+  };
 
 export interface UseTailwindOptions {
-  siblingClassName?: string;
+  nthChild?: number;
+  [ChildClassNameSymbol]?: string;
 }

src/utils/child-styles.ts

@@ -0,0 +1 @@
+export const ChildClassNameSymbol = Symbol("child");