diff --git a/README.md b/README.md index 05e5e27..f266034 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,31 @@ 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) @@ -25,4 +50,4 @@ We spend a lot of time working on our [free developer services](https://beyondco ## License -The MIT License (MIT). Please see [License File](LICENSE.md) for more information. \ No newline at end of file +The MIT License (MIT). Please see [License File](LICENSE.md) for more information. diff --git a/src/main.js b/src/main.js index 9226612..44958d2 100644 --- a/src/main.js +++ b/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), } -})(); \ No newline at end of file +})(); diff --git a/src/observer.js b/src/observer.js index 0d43d08..0c1470b 100644 --- a/src/observer.js +++ b/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; }; -}; \ No newline at end of file +};