docs: attempt to add babel playground

2026-06-16 19:51:20 +08:00 · 2022-06-26 22:55:11 +10:00
parent 1e96454049
commit a9d528d324
9 changed files with 567 additions and 20 deletions
--- a/src/babel/root-visitor.ts
+++ b/src/babel/root-visitor.ts
@@ -80,7 +80,6 @@ export default function rootVisitor(
            blockList: new Set(),
            hasStyleSheetImport: false,
            tailwindConfig,
-            tailwindConfigPath,
          };

          // Traverse the file
--- a/src/babel/visitor.ts
+++ b/src/babel/visitor.ts
@@ -16,14 +16,13 @@ import { Config } from "tailwindcss";

 export interface VisitorState
  extends State,
-    Required<TailwindcssReactNativeBabelOptions> {
+    Omit<Required<TailwindcssReactNativeBabelOptions>, "tailwindConfigPath"> {
  cwd: string;
  allowRelativeModules: AllowPathOptions;
  blockList: Set<string>;
  hasStyledComponentImport: boolean;
  hasStyleSheetImport: boolean;
  tailwindConfig: Config;
-  tailwindConfigPath: string;
  canCompile: boolean;
  canTransform: boolean;
  didTransform: boolean;
--- a/src/style-sheet-store/index.ts
+++ b/src/style-sheet-store/index.ts
@@ -483,4 +483,5 @@ const flattenIfRNW = <T extends Style>(style: T | number): T => {
    : style;
 };

-export const StoreContext = createContext(new StyleSheetStore());
+export const StyleSheetStoreSingleton = new StyleSheetStore();
+export const StoreContext = createContext(StyleSheetStoreSingleton);
--- a/website/docs/guides/babel.mdx
+++ b/website/docs/guides/babel.mdx
@@ -1,6 +1,7 @@
 import StartCoding from "../_start-coding.md";
 import Dependencies from "../_dependencies.mdx";
 import Tailwind from "../_tailwind.mdx";
+import BabelEditor from "../../src/babel-editor";

 # Babel

@@ -8,6 +9,8 @@ The default babel configuration will both compile/inject the Tailwind CSS styles

 This is the recommended configuration as it provides the fastest setup and best DX experience, with support for Tailwind intellisense within your IDE.

+<BabelEditor />
+
 ```tsx
 /* Example how your code will look */
 import { Text } from "react-native";
--- a/website/docs/tailwind/layout/container.md
+++ b/website/docs/tailwind/layout/container.md
@@ -0,0 +1,23 @@
+# Container
+
+:::caution
+NativeWind's default theme is not yet designed for native devices and still uses breakpoints that were mostly designed for web.
+:::
+
+`container` is fully supported by NativeWind. Please see [Tailwind CSS documentation for usuage](https://tailwindcss.com/docs/container)
+
+```SnackPlayer name=Container
+import { Text, View } from 'react-native';
+import { styled } from 'nativewind';
+
+const StyledView = styled(View)
+const StyledText = styled(Text)
+
+const App = () => {
+  return (
+    <StyledView className="container bg-slate-300 items-center">
+      <StyledText className="text-slate-800">Try editing me! 🎉</StyledText>
+    </StyledView>
+  );
+}
+```
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -8,12 +8,18 @@
      "name": "website",
      "version": "0.0.0",
      "dependencies": {
+        "@babel/standalone": "^7.18.5",
+        "@codemirror/lang-javascript": "^6.0.0",
        "@docusaurus/core": "2.0.0-beta.21",
        "@docusaurus/preset-classic": "2.0.0-beta.21",
        "@mdx-js/react": "1.6.22",
+        "@uiw/codemirror-theme-dracula": "^4.9.4",
+        "@uiw/codemirror-theme-eclipse": "^4.9.4",
+        "@uiw/react-codemirror": "^4.9.4",
        "clsx": "1.1.1",
        "dedent": "^0.7.0",
-        "nativewind": "latest",
+        "lodash.debounce": "^4.0.8",
+        "nativewind": "^2.0.0-next.24",
        "prism-react-renderer": "1.3.3",
        "react": "17.0.2",
        "react-dom": "17.0.2",
@@ -21,6 +27,10 @@
        "tailwindcss": "^3.1.4",
        "unist-builder": "^2.0.3",
        "unist-util-visit-parents": "^3.1.1"
+      },
+      "devDependencies": {
+        "@types/babel__standalone": "^7.1.4",
+        "@types/lodash.debounce": "^4.0.7"
      }
    },
    "node_modules/@algolia/autocomplete-core": {
@@ -578,9 +588,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.3.tgz",
-      "integrity": "sha512-rL50YcEuHbbauAFAysNsJA4/f89fGTOBRNs9P81sniKnKAr4xULe5AecolcsKbi88xu0ByWYDj/S1AJ3FSFuSQ==",
+      "version": "7.18.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
+      "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==",
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@@ -1819,6 +1829,14 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@babel/standalone": {
+      "version": "7.18.5",
+      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.18.5.tgz",
+      "integrity": "sha512-3RlzTl3JSvbY1bvaRmuHf3fM2BSy7IbX0zqpVFjsiGO7678KE/LytwvJN+f5MGrarnUFUz2DNcCdetumWdIAKA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/template": {
      "version": "7.16.7",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -1864,6 +1882,107 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.0.2.tgz",
+      "integrity": "sha512-9PDjnllmXan/7Uax87KGORbxerDJ/cu10SB+n4Jz0zXMEvIh3+TGgZxhIvDOtaQ4jDBQEM7kHYW4vLdQB0DGZQ==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.0.0.tgz",
+      "integrity": "sha512-nVJDPiCQXWXj5AZxqNVXyIM3nOYauF4Dko9NGPSwgVdK+lXWJQhI5LGhS/AvdG5b7u7/pTQBkrQmzkLWRBF62A==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.0.tgz",
+      "integrity": "sha512-IQLfR+pgydwLxP3AQYOhjGfLWlAZz5SEH+M1tnUXVvp2+KZhn3iDTQX/7HZgoJ3w0oySKOxPjdq6jmkTCW6/sg==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.1.0.tgz",
+      "integrity": "sha512-CeqY80nvUFrJcXcBW115aNi06D0PS8NSW6nuJRSwbrYFkE0SfJnPfyLGrcM90AV95lqg5+4xUi99BCmzNaPGJg==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz",
+      "integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.0.0.tgz",
+      "integrity": "sha512-rL0rd3AhI0TAsaJPUaEwC63KHLO7KL0Z/dYozXj6E7L3wNHRyx7RfE0/j5HsIf912EE5n2PCb4Vg0rGYmDv4UQ==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.0.1.tgz",
+      "integrity": "sha512-6vYgaXc4KjSY0BUfSVDJooGcoswg/RJZpq/ZGjsUYmY0KN1lmB8u03nv+jiG1ncUV5qoggyxFT5AGD5Ak+5Zrw=="
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz",
+      "integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.0.2.tgz",
+      "integrity": "sha512-mnVT/q1JvKPjpmjXJNeCi/xHyaJ3abGJsumIVpdQ1nE1MXAyHf7GHWt8QpWMUvDiqF0j+inkhVR2OviTdFFX7Q==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
    "node_modules/@colors/colors": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -2603,6 +2722,36 @@
      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
      "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg=="
    },
+    "node_modules/@lezer/common": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz",
+      "integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA=="
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz",
+      "integrity": "sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.0.tgz",
+      "integrity": "sha512-RawBSrMD9yrVdrXWKn7hqo5BqgBaFelUx80i6p2/V0f+0THjncSSrRC6v3QWVv++RpqWT59L8ujKZjlExJq9xw==",
+      "dependencies": {
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.0.0.tgz",
+      "integrity": "sha512-k6DEqBh4HxqO/cVGedb6Ern6LS7K6IOzfydJ5WaqCR26v6UR9sIFyb6PS+5rPUs/mXgnBR/QQCW7RkyjSCMoQA==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
    "node_modules/@mdx-js/mdx": {
      "version": "1.6.22",
      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz",
@@ -3147,6 +3296,15 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/@types/babel__standalone": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__standalone/-/babel__standalone-7.1.4.tgz",
+      "integrity": "sha512-HijIDmcNl3Wmo0guqjYkQvMzyRCM6zMCkYcdG8f+2X7mPBNa9ikSeaQlWs2Yg18KN1klOJzyupX5BPOf+7ahaw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.1.0"
+      }
+    },
    "node_modules/@types/body-parser": {
      "version": "1.19.2",
      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -3256,6 +3414,21 @@
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.182",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
+    },
+    "node_modules/@types/lodash.debounce": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz",
+      "integrity": "sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
    "node_modules/@types/mdast": {
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@@ -3394,6 +3567,47 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@uiw/codemirror-theme-dracula": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-dracula/-/codemirror-theme-dracula-4.9.4.tgz",
+      "integrity": "sha512-NHhfOm9tbzD8zw/ev2kordyRmiO3A7B5MzMFkpxCP4vTZH/+TR/jctw+RfN+1DwJYXUo1DEultvRWJ99u9zTjg==",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.9.4"
+      }
+    },
+    "node_modules/@uiw/codemirror-theme-eclipse": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-eclipse/-/codemirror-theme-eclipse-4.9.4.tgz",
+      "integrity": "sha512-CWHVlMz0b0HagygDuFarZLr1W2esTbo1/O0euU3Aar48xRDQolSgmFM37qRlgkBZdaM4okFPhHmv5afJ6oUNdA==",
+      "dependencies": {
+        "@uiw/codemirror-themes": "4.9.4"
+      }
+    },
+    "node_modules/@uiw/codemirror-themes": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.9.4.tgz",
+      "integrity": "sha512-8aBVCenwvhIUjs6HNenqZhxIbrRdN/sBVPmikPi3lntK1HfGRqBHmU0XjdCjp6uGXwUl7b5J0mmNsKS7PaLPWg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
+    "node_modules/@uiw/react-codemirror": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.9.4.tgz",
+      "integrity": "sha512-IsC5xDevpIeLMzHQQwT2W40gFFIdKeT1T0DHjzzai+s5SIrMlGe3QSHWeC1wSO7FtfNxFpFlTYMGJm5JwUviMA==",
+      "dependencies": {
+        "@babel/runtime": ">=7.11.0",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "codemirror": "^6.0.0"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.11.0",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
    "node_modules/@webassemblyjs/ast": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -4724,6 +4938,20 @@
        "node": ">=6"
      }
    },
+    "node_modules/codemirror": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.0.tgz",
+      "integrity": "sha512-c4XR9QtDn+NhKLM2FBsnRn9SFdRH7G6594DYC/fyKKIsTOcdLF0WNWRd+f6kNyd5j1vgYPucbIeq2XkywYCwhA==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
    "node_modules/collapse-white-space": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
@@ -5090,6 +5318,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/crelt": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
+      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
+    },
    "node_modules/cross-fetch": {
      "version": "3.1.5",
      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@@ -7942,7 +8175,7 @@
    "node_modules/lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
    },
    "node_modules/lodash.defaults": {
      "version": "4.2.0",
@@ -8386,9 +8619,9 @@
      }
    },
    "node_modules/nativewind": {
-      "version": "2.0.0-next.23",
-      "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-2.0.0-next.23.tgz",
-      "integrity": "sha512-fJlNRrwGYcNHOVUMvKnj3A+2sa9tSDLleWDe219CnSADfwl+opc3heESv3ieISR3VwhMu8/eFSO04gvxyDPYZw==",
+      "version": "2.0.0-next.24",
+      "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-2.0.0-next.24.tgz",
+      "integrity": "sha512-RT4p99OGvrFT8kTVz8qqU2WXLCQX1ZFxX33hfSOpj/eAPiSZRktD1w0qd9vfr5Z8ybHMnbMYuJ/AdFgA8lpFPQ==",
      "dependencies": {
        "@babel/types": "7.18.4",
        "css-mediaquery": "^0.1.2",
@@ -11552,6 +11785,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/style-mod": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
+      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+    },
    "node_modules/style-to-object": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
@@ -12573,6 +12811,11 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
    "node_modules/wait-on": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-6.0.1.tgz",
@@ -13788,9 +14031,9 @@
      }
    },
    "@babel/parser": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.3.tgz",
-      "integrity": "sha512-rL50YcEuHbbauAFAysNsJA4/f89fGTOBRNs9P81sniKnKAr4xULe5AecolcsKbi88xu0ByWYDj/S1AJ3FSFuSQ=="
+      "version": "7.18.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
+      "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw=="
    },
    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
      "version": "7.17.12",
@@ -14589,6 +14832,11 @@
        "regenerator-runtime": "^0.13.4"
      }
    },
+    "@babel/standalone": {
+      "version": "7.18.5",
+      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.18.5.tgz",
+      "integrity": "sha512-3RlzTl3JSvbY1bvaRmuHf3fM2BSy7IbX0zqpVFjsiGO7678KE/LytwvJN+f5MGrarnUFUz2DNcCdetumWdIAKA=="
+    },
    "@babel/template": {
      "version": "7.16.7",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -14625,6 +14873,101 @@
        "to-fast-properties": "^2.0.0"
      }
    },
+    "@codemirror/autocomplete": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.0.2.tgz",
+      "integrity": "sha512-9PDjnllmXan/7Uax87KGORbxerDJ/cu10SB+n4Jz0zXMEvIh3+TGgZxhIvDOtaQ4jDBQEM7kHYW4vLdQB0DGZQ==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@codemirror/commands": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.0.0.tgz",
+      "integrity": "sha512-nVJDPiCQXWXj5AZxqNVXyIM3nOYauF4Dko9NGPSwgVdK+lXWJQhI5LGhS/AvdG5b7u7/pTQBkrQmzkLWRBF62A==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@codemirror/lang-javascript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.0.tgz",
+      "integrity": "sha512-IQLfR+pgydwLxP3AQYOhjGfLWlAZz5SEH+M1tnUXVvp2+KZhn3iDTQX/7HZgoJ3w0oySKOxPjdq6jmkTCW6/sg==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "@codemirror/language": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.1.0.tgz",
+      "integrity": "sha512-CeqY80nvUFrJcXcBW115aNi06D0PS8NSW6nuJRSwbrYFkE0SfJnPfyLGrcM90AV95lqg5+4xUi99BCmzNaPGJg==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "@codemirror/lint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz",
+      "integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/search": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.0.0.tgz",
+      "integrity": "sha512-rL0rd3AhI0TAsaJPUaEwC63KHLO7KL0Z/dYozXj6E7L3wNHRyx7RfE0/j5HsIf912EE5n2PCb4Vg0rGYmDv4UQ==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/state": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.0.1.tgz",
+      "integrity": "sha512-6vYgaXc4KjSY0BUfSVDJooGcoswg/RJZpq/ZGjsUYmY0KN1lmB8u03nv+jiG1ncUV5qoggyxFT5AGD5Ak+5Zrw=="
+    },
+    "@codemirror/theme-one-dark": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz",
+      "integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "@codemirror/view": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.0.2.tgz",
+      "integrity": "sha512-mnVT/q1JvKPjpmjXJNeCi/xHyaJ3abGJsumIVpdQ1nE1MXAyHf7GHWt8QpWMUvDiqF0j+inkhVR2OviTdFFX7Q==",
+      "requires": {
+        "@codemirror/state": "^6.0.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
    "@colors/colors": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -15186,6 +15529,36 @@
      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
      "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg=="
    },
+    "@lezer/common": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz",
+      "integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA=="
+    },
+    "@lezer/highlight": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz",
+      "integrity": "sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==",
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "@lezer/javascript": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.0.tgz",
+      "integrity": "sha512-RawBSrMD9yrVdrXWKn7hqo5BqgBaFelUx80i6p2/V0f+0THjncSSrRC6v3QWVv++RpqWT59L8ujKZjlExJq9xw==",
+      "requires": {
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "@lezer/lr": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.0.0.tgz",
+      "integrity": "sha512-k6DEqBh4HxqO/cVGedb6Ern6LS7K6IOzfydJ5WaqCR26v6UR9sIFyb6PS+5rPUs/mXgnBR/QQCW7RkyjSCMoQA==",
+      "requires": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
    "@mdx-js/mdx": {
      "version": "1.6.22",
      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz",
@@ -15557,6 +15930,15 @@
      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
    },
+    "@types/babel__standalone": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__standalone/-/babel__standalone-7.1.4.tgz",
+      "integrity": "sha512-HijIDmcNl3Wmo0guqjYkQvMzyRCM6zMCkYcdG8f+2X7mPBNa9ikSeaQlWs2Yg18KN1klOJzyupX5BPOf+7ahaw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.1.0"
+      }
+    },
    "@types/body-parser": {
      "version": "1.19.2",
      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -15666,6 +16048,21 @@
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
    },
+    "@types/lodash": {
+      "version": "4.14.182",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
+    },
+    "@types/lodash.debounce": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz",
+      "integrity": "sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
    "@types/mdast": {
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@@ -15804,6 +16201,42 @@
        "@types/node": "*"
      }
    },
+    "@uiw/codemirror-theme-dracula": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-dracula/-/codemirror-theme-dracula-4.9.4.tgz",
+      "integrity": "sha512-NHhfOm9tbzD8zw/ev2kordyRmiO3A7B5MzMFkpxCP4vTZH/+TR/jctw+RfN+1DwJYXUo1DEultvRWJ99u9zTjg==",
+      "requires": {
+        "@uiw/codemirror-themes": "4.9.4"
+      }
+    },
+    "@uiw/codemirror-theme-eclipse": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-eclipse/-/codemirror-theme-eclipse-4.9.4.tgz",
+      "integrity": "sha512-CWHVlMz0b0HagygDuFarZLr1W2esTbo1/O0euU3Aar48xRDQolSgmFM37qRlgkBZdaM4okFPhHmv5afJ6oUNdA==",
+      "requires": {
+        "@uiw/codemirror-themes": "4.9.4"
+      }
+    },
+    "@uiw/codemirror-themes": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.9.4.tgz",
+      "integrity": "sha512-8aBVCenwvhIUjs6HNenqZhxIbrRdN/sBVPmikPi3lntK1HfGRqBHmU0XjdCjp6uGXwUl7b5J0mmNsKS7PaLPWg==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
+    "@uiw/react-codemirror": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.9.4.tgz",
+      "integrity": "sha512-IsC5xDevpIeLMzHQQwT2W40gFFIdKeT1T0DHjzzai+s5SIrMlGe3QSHWeC1wSO7FtfNxFpFlTYMGJm5JwUviMA==",
+      "requires": {
+        "@babel/runtime": ">=7.11.0",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "codemirror": "^6.0.0"
+      }
+    },
    "@webassemblyjs/ast": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -16808,6 +17241,20 @@
      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
    },
+    "codemirror": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.0.tgz",
+      "integrity": "sha512-c4XR9QtDn+NhKLM2FBsnRn9SFdRH7G6594DYC/fyKKIsTOcdLF0WNWRd+f6kNyd5j1vgYPucbIeq2XkywYCwhA==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
    "collapse-white-space": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
@@ -17079,6 +17526,11 @@
        "yaml": "^1.10.0"
      }
    },
+    "crelt": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
+      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
+    },
    "cross-fetch": {
      "version": "3.1.5",
      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@@ -19128,7 +19580,7 @@
    "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
    },
    "lodash.defaults": {
      "version": "4.2.0",
@@ -19462,9 +19914,9 @@
      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
    },
    "nativewind": {
-      "version": "2.0.0-next.23",
-      "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-2.0.0-next.23.tgz",
-      "integrity": "sha512-fJlNRrwGYcNHOVUMvKnj3A+2sa9tSDLleWDe219CnSADfwl+opc3heESv3ieISR3VwhMu8/eFSO04gvxyDPYZw==",
+      "version": "2.0.0-next.24",
+      "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-2.0.0-next.24.tgz",
+      "integrity": "sha512-RT4p99OGvrFT8kTVz8qqU2WXLCQX1ZFxX33hfSOpj/eAPiSZRktD1w0qd9vfr5Z8ybHMnbMYuJ/AdFgA8lpFPQ==",
      "requires": {
        "@babel/types": "7.18.4",
        "css-mediaquery": "^0.1.2",
@@ -21711,6 +22163,11 @@
      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
    },
+    "style-mod": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
+      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+    },
    "style-to-object": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
@@ -22410,6 +22867,11 @@
        "unist-util-stringify-position": "^2.0.0"
      }
    },
+    "w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
    "wait-on": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-6.0.1.tgz",
--- a/website/package.json
+++ b/website/package.json
@@ -14,12 +14,18 @@
    "write-heading-ids": "docusaurus write-heading-ids"
  },
  "dependencies": {
+    "@babel/standalone": "^7.18.5",
+    "@codemirror/lang-javascript": "^6.0.0",
    "@docusaurus/core": "2.0.0-beta.21",
    "@docusaurus/preset-classic": "2.0.0-beta.21",
    "@mdx-js/react": "1.6.22",
+    "@uiw/codemirror-theme-dracula": "^4.9.4",
+    "@uiw/codemirror-theme-eclipse": "^4.9.4",
+    "@uiw/react-codemirror": "^4.9.4",
    "clsx": "1.1.1",
    "dedent": "^0.7.0",
-    "nativewind": "latest",
+    "lodash.debounce": "^4.0.8",
+    "nativewind": "^2.0.0-next.24",
    "prism-react-renderer": "1.3.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
@@ -39,5 +45,9 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "@types/babel__standalone": "^7.1.4",
+    "@types/lodash.debounce": "^4.0.7"
  }
 }
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -120,6 +120,7 @@ const sidebars = {
          label: "Aspect ratio",
          href: "https://tailwindcss.com/docs/aspect-ratio",
        },
+        "tailwind/layout/container",
        {
          type: "link",
          label: "Container",
--- a/website/src/babel-editor/index.tsx
+++ b/website/src/babel-editor/index.tsx
@@ -0,0 +1,49 @@
+import React, { useMemo, useState } from "react";
+
+import debounce from "lodash.debounce";
+import CodeMirror from "@uiw/react-codemirror";
+import { dracula } from "@uiw/codemirror-theme-dracula";
+import { eclipse } from "@uiw/codemirror-theme-eclipse";
+import { javascript } from "@codemirror/lang-javascript";
+import { useColorMode } from "@docusaurus/theme-common";
+
+// import nativewind from "nativewind/babel";
+// import { transform } from "@babel/standalone";
+
+const initialText = "console.log('hello world!');";
+
+export default function BabelEditor() {
+  const { colorMode } = useColorMode();
+  const [text, setText] = useState(initialText);
+  const update = useMemo(
+    () =>
+      debounce((code: string) => {
+        // const output = transform(code, {
+        //   plugins: [nativewind],
+        // });
+
+        setText(code);
+      }),
+    [setText]
+  );
+
+  return (
+    <>
+      <CodeMirror
+        value={initialText}
+        height="200px"
+        extensions={[javascript({ jsx: true })]}
+        theme={colorMode === "dark" ? dracula : eclipse}
+        onChange={update}
+      />
+
+      <CodeMirror
+        value={text}
+        editable={false}
+        height="200px"
+        extensions={[javascript({ jsx: true })]}
+        theme={colorMode === "dark" ? dracula : eclipse}
+      />
+    </>
+  );
+}