Adding options and observerElement

README.md

@@ -18,11 +18,36 @@ You can learn all about this package in our [in-depth blog post](https://beyondc
 
 We spend a lot of time working on our [free developer services](https://beyondco.de/services) or open source packages. You can support our work by [buying one of our paid products](https://beyondco.de/software).
 
+## Development
+
+If you want to create your own build of TailwindCSS JIT CDN, you can fork this repo, clone it, and then run the following commands to get started:
+
+```
+yarn install
+yarn run build
+```
+
+Then, link to your new `dist/tailwindcss-jit-cdn.umd.js` in your project in order to run your build.
+
+## Options
+
+A set of `tailwindOptions` to configure for the JIT CDN. Currently there is only one option available, you can use it as follows:
+
+```
+window.tailwindOptions = {
+    observerElement: document.getElementById('app')
+};
+```
+
+> By default the TailwindCSS JIT CDN will observe your entire page via `document.documentElement`, you can override this option via the `observerElement` property. In the options above the observer will only observe Tailwind classes inside of `app` element. This might be helpful for page speed, user experience, or a few other scenarios.
+
+💡 Have ideas for options you would like to see, let us know.
+
 ## Credits
 
 - [Marcel Pociot](https://github.com/mpociot)
 - [All Contributors](../../contributors)
 
 ## License
 
-The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

src/main.js

@@ -1,21 +1,31 @@
 import observerScript from "./observer";
 
-(() => {  
+(() => {
   const config = {
     attributes: true,
     attributeFilter: ["class"],
     childList: true,
-    subtree: true, 
+    subtree: true,
   };
 
-  new MutationObserver(observerScript(false)).observe(
-    document.documentElement,
+  // Set the default options
+  let options = {
+      observerElement: document.documentElement
+  };
+
+  // If the user specified values for window.tailwindOptions, merge those options
+  if(typeof window.tailwindOptions !== 'undefined'){
+      options = { ...options, ...window.tailwindOptions };
+  }
+
+  new MutationObserver(observerScript(options, false)).observe(
+    options.observerElement,
     config
   );
 
   observerScript();
 
   window.tailwindCSS = {
-    refresh: observerScript(true),
+    refresh: observerScript(options, true),
   }
-})();
+})();

src/observer.js

@@ -8,9 +8,9 @@ const tailwindId = nanoid();
 
 let lastProcessedHtml = "";
 
-export default (force = false) => {
+export default (options, force = false) => {
   return async () => {
-    self[VIRTUAL_HTML_FILENAME] = document.documentElement.outerHTML;
+    self[VIRTUAL_HTML_FILENAME] = options.observerElement.outerHTML;
 
     if (self[VIRTUAL_HTML_FILENAME] === lastProcessedHtml && force === false) {
       return;
@@ -25,7 +25,7 @@ export default (force = false) => {
       purge: [VIRTUAL_HTML_FILENAME],
       theme: {},
       plugins: [
-        require("@tailwindcss/forms"), 
+        require("@tailwindcss/forms"),
         require("@tailwindcss/typography"),
         require("@tailwindcss/aspect-ratio"),
         require("@tailwindcss/line-clamp")
@@ -61,4 +61,4 @@ export default (force = false) => {
 
     style.textContent = result.css;
   };
-};
+};