├── babel.config.js
├── src
    ├── constants.js
    ├── modules
    │   └── fs.js
    ├── parseCustomConfig.js
    ├── main.js
    └── observer.js
├── .gitignore
├── README.md
├── LICENSE
├── public
    └── index.html
├── package.json
└── vue.config.js


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   VIRTUAL_SOURCE_PATH: "/sourcePath",
3 |   VIRTUAL_HTML_FILENAME: "/htmlInput",
4 | };
5 | 


--------------------------------------------------------------------------------
/src/modules/fs.js:
--------------------------------------------------------------------------------
1 | let i = 0
2 | 
3 | module.exports = {
4 |   statSync: () => {
5 |     return { mtimeMs: ++i }
6 |   },
7 |   readFileSync: (id) => self[id] || '',
8 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 
24 | .vercel


--------------------------------------------------------------------------------
/src/parseCustomConfig.js:
--------------------------------------------------------------------------------
 1 | // eslint-disable-next-line no-unused-vars
 2 | const colors = require("tailwindcss/colors");
 3 | 
 4 | export default () => {
 5 |   let userConfig = {};
 6 | 
 7 |   try {
 8 |     let customConfig = document.querySelector('script[type="tailwind-config"]').innerText;
 9 |     
10 |     userConfig = eval(`(${customConfig})`) || {};
11 |   } catch (err) {
12 |     //
13 |   }
14 | 
15 |   return userConfig;
16 | };
17 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import observerScript from "./observer";
 2 | 
 3 | (() => {  
 4 |   const config = {
 5 |     attributes: true,
 6 |     attributeFilter: ["class"],
 7 |     childList: true,
 8 |     subtree: true, 
 9 |   };
10 | 
11 |   new MutationObserver(observerScript(false)).observe(
12 |     document.documentElement,
13 |     config
14 |   );
15 | 
16 |   observerScript();
17 | 
18 |   window.tailwindCSS = {
19 |     refresh: observerScript(true),
20 |   }
21 | })();


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tailwind JIT CDN
 2 | 
 3 | Use the full power of Tailwind CSS' new JIT compiler by including one script tag to your HTML.
 4 | 
 5 | ## Usage:
 6 | 
 7 | Just include this script tag into your site:
 8 | 
 9 | ```
10 | <script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
11 | ```
12 | 
13 | You can learn all about this package in our [in-depth blog post](https://beyondco.de/blog/tailwind-jit-compiler-via-cdn).
14 | 
15 | ## Support Us
16 | 
17 | [<img src="https://usewindy.com/img/card-new.png">](https://usewindy.com)
18 | 
19 | 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).
20 | 
21 | ## Credits
22 | 
23 | - [Marcel Pociot](https://github.com/mpociot)
24 | - [All Contributors](../../contributors)
25 | 
26 | ## License
27 | 
28 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Beyond Code
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <script type="tailwind-config">
 2 | {
 3 |     theme: {
 4 |         extend: {
 5 |             colors: {
 6 |                 'regal-blue': '#243c5a',
 7 |             }
 8 |         }
 9 |     }
10 | }
11 | </script>
12 | <style type="postcss">
13 | ::selection {
14 |     @apply bg-pink-500;
15 | }
16 | </style>
17 | <div class="container mx-auto pt-16">
18 |     <p class="first-letter:text-red-500 first-letter:text-2xl first-letter:underline">
19 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem soluta, quos a dolores voluptas et necessitatibus consequuntur omnis neque repellat unde, reprehenderit nam vero harum sit quaerat qui. Rem, illo!
20 |     </p>
21 |     <div class="h-8 w-8 bg-regal-blue rounded-full hover:bg-blue-800 cursor-pointer first-letter:text-red-500">
22 |     </div>
23 |     <div class="max-w-lg flex rounded-md shadow-sm mb-8">
24 |         <input id="search" v-model="search" autocomplete="off" placeholder="Search users"
25 |             class="flex-1 form-input block w-full rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
26 |     </div>
27 | 
28 |     <div class="foo">asd</div>
29 | </div>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-jit-cdn",
 3 |   "version": "1.3.0",
 4 |   "scripts": {
 5 |     "serve": "vue-cli-service serve --target lib --name tailwindcss-jit-cdn src/main.js",
 6 |     "build": "vue-cli-service build --target lib --name tailwindcss-jit-cdn src/main.js",
 7 |     "lint": "vue-cli-service lint"
 8 |   },
 9 |   "main": "dist/tailwindcss-jit-cdn.umd.min.js",
10 |   "dependencies": {
11 |     "@tailwindcss/aspect-ratio": "^0.2.0",
12 |     "@tailwindcss/forms": "^0.3.2",
13 |     "@tailwindcss/line-clamp": "^0.2.0",
14 |     "@tailwindcss/typography": "^0.4.0",
15 |     "core-js": "^3.6.5",
16 |     "modern-normalize": "^1.1.0",
17 |     "nanoid": "^3.1.22",
18 |     "normalize.css": "^8.0.1",
19 |     "postcss": "^8.1.6",
20 |     "tailwindcss": "^2.2.0"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "~4.4.0",
24 |     "@vue/cli-plugin-eslint": "~4.4.0",
25 |     "@vue/cli-service": "~4.4.0",
26 |     "babel-eslint": "^10.1.0",
27 |     "eslint": "^6.7.2",
28 |     "eslint-plugin-vue": "^6.2.2",
29 |     "simple-functional-loader": "^1.2.1"
30 |   },
31 |   "eslintConfig": {
32 |     "root": true,
33 |     "env": {
34 |       "node": true
35 |     },
36 |     "extends": [
37 |       "plugin:vue/essential",
38 |       "eslint:recommended"
39 |     ],
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     },
43 |     "rules": {}
44 |   },
45 |   "browserslist": [
46 |     "> 1%",
47 |     "last 2 versions",
48 |     "not dead"
49 |   ]
50 | }
51 | 


--------------------------------------------------------------------------------
/src/observer.js:
--------------------------------------------------------------------------------
 1 | import parseCustomConfig from "./parseCustomConfig";
 2 | import { VIRTUAL_SOURCE_PATH, VIRTUAL_HTML_FILENAME } from "./constants";
 3 | import tailwindcss from "tailwindcss";
 4 | import postcss from "postcss";
 5 | import { nanoid } from "nanoid";
 6 | 
 7 | const tailwindId = nanoid();
 8 | 
 9 | let lastProcessedHtml = "";
10 | 
11 | export default (force = false) => {
12 |   return async () => {
13 |     self[VIRTUAL_HTML_FILENAME] = document.documentElement.outerHTML;
14 | 
15 |     if (self[VIRTUAL_HTML_FILENAME] === lastProcessedHtml && force === false) {
16 |       return;
17 |     }
18 | 
19 |     let userConfig = parseCustomConfig();
20 | 
21 |     lastProcessedHtml = self[VIRTUAL_HTML_FILENAME];
22 | 
23 |     let defaultConfig = {
24 |       mode: "jit",
25 |       purge: [VIRTUAL_HTML_FILENAME],
26 |       theme: {},
27 |       plugins: [
28 |         require("@tailwindcss/forms"), 
29 |         require("@tailwindcss/typography"),
30 |         require("@tailwindcss/aspect-ratio"),
31 |         require("@tailwindcss/line-clamp")
32 |       ],
33 |     };
34 | 
35 |     let customCss = '';
36 |     document.querySelectorAll('style[type="postcss"]').forEach(styleTag => {
37 |       customCss += styleTag.innerHTML;
38 |     })
39 | 
40 |     const result = await postcss([
41 |       tailwindcss({ ...defaultConfig, ...userConfig }),
42 |     ]).process(
43 |       `
44 |       @tailwind base;
45 |       @tailwind components;
46 |       ${customCss}
47 |       @tailwind utilities;
48 |       `,
49 |       {
50 |         from: VIRTUAL_SOURCE_PATH,
51 |       }
52 |     );
53 | 
54 |     let style = document.getElementById(tailwindId);
55 | 
56 |     if (style === null) {
57 |       style = document.createElement("style");
58 |       style.id = tailwindId;
59 |       document.head.append(style);
60 |     }
61 | 
62 |     style.textContent = result.css;
63 |   };
64 | };


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
  1 | const { createLoader } = require("simple-functional-loader");
  2 | const webpack = require("webpack");
  3 | const path = require("path");
  4 | const fs = require("fs");
  5 | 
  6 | const externals = {
  7 |   resolve: "self.resolve",
  8 |   chokidar: "self.chokidar",
  9 |   purgecss: "self.purgecss",
 10 |   tmp: 'self.tmp',
 11 | };
 12 | 
 13 | const moduleOverrides = {
 14 |   fs: path.resolve(__dirname, "src/modules/fs.js"),
 15 | };
 16 | 
 17 | function getExternal(context, request, callback) {
 18 |   if (/node_modules/.test(context) && externals[request]) {
 19 |     return callback(null, externals[request]);
 20 |   }
 21 |   callback();
 22 | }
 23 | 
 24 | const files = [
 25 |   {
 26 |     pattern: /modern-noramlize/,
 27 |     file: require.resolve("modern-normalize"),
 28 |   },
 29 |   {
 30 |     pattern: /normalize/,
 31 |     file: require.resolve("normalize.css"),
 32 |   },
 33 |   {
 34 |     pattern: /preflight/,
 35 |     file: path.resolve(
 36 |       __dirname,
 37 |       "node_modules/tailwindcss/lib/plugins/css/preflight.css"
 38 |     ),
 39 |   },
 40 | ];
 41 | 
 42 | module.exports = {
 43 |   productionSourceMap: false,
 44 |   configureWebpack: (config) => {
 45 | 
 46 |     config.resolve.alias = { ...config.resolve.alias, ...moduleOverrides };
 47 | 
 48 |     config.plugins.push(
 49 |       new webpack.DefinePlugin({
 50 |         "process.env.TAILWIND_MODE": JSON.stringify("build"),
 51 |         "process.env.TAILWIND_DISABLE_TOUCH": true,
 52 |       })
 53 |     );
 54 | 
 55 |     // there's some node-specific stuff in parse-glob
 56 |     // we don't use globs though so this can be overridden
 57 |     config.module.rules.push({
 58 |       test: require.resolve('tailwindcss/node_modules/glob-parent'),
 59 |       use: [
 60 |         createLoader(function(_source) {
 61 |           return `module.exports = () => ''`;
 62 |         }),
 63 |       ],
 64 |     });
 65 | 
 66 |     config.module.rules.push({
 67 |       test: require.resolve('is-glob'),
 68 |       use: [
 69 |         createLoader(function(_source) {
 70 |           return `module.exports = () => false`;
 71 |         }),
 72 |       ],
 73 |     });
 74 | 
 75 |     config.module.rules.push({
 76 |       test: require.resolve('tailwindcss/node_modules/fast-glob'),
 77 |       use: [
 78 |         createLoader(function (_source) {
 79 |           return `module.exports = {
 80 |             sync: (patterns) => [].concat(patterns)
 81 |           }`
 82 |         }),
 83 |       ],
 84 |     })
 85 | 
 86 |     config.module.rules.push({
 87 |       test: require.resolve("tailwindcss/lib/jit/processTailwindFeatures.js"),
 88 |       use: createLoader(function(source) {
 89 |         return source.replace(`let warned = false;`, `let warned = true;`);
 90 |       }),
 91 |     });
 92 | 
 93 |     config.module.rules.push({
 94 |       test: require.resolve("tailwindcss/lib/plugins/preflight.js"),
 95 |       use: createLoader(function(source) {
 96 |         return source.replace(
 97 |           /_fs\.default\.readFileSync\(.*?'utf8'\)/g,
 98 |           (m) => {
 99 |             for (let i = 0; i < files.length; i++) {
100 |               if (
101 |                 files[i].pattern.test(m)
102 |               ) {
103 |                 return (
104 |                   "`" +
105 |                   fs.readFileSync(files[i].file, "utf8").replace(/`/g, "\\`") +
106 |                   "`"
107 |                 );
108 |               }
109 |             }
110 |             return m;
111 |           }
112 |         );
113 |       }),
114 |     });
115 | 
116 |     config.output.globalObject = "self";
117 | 
118 |     if (config.externals) {
119 |       config.externals.push(getExternal);
120 |     } else {
121 |       config.externals = [getExternal];
122 |     }
123 |   },
124 | };
125 | 


--------------------------------------------------------------------------------