Set up Tailwind

Author: gilbitron

package.json

@@ -34,15 +34,19 @@
     "vue": "^3.2.25"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
     "@vitejs/plugin-vue": "^2.2.0",
     "@vue/test-utils": "^2.0.0-rc.17",
+    "autoprefixer": "^10.4.13",
     "bootstrap": "^4",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.4.1",
     "jest": "^27.5.1",
     "jest-environment-jsdom": "^27.5.1",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.1",
     "vite": "^2.8.0",
     "vite-jest": "^0.1.4"
   }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/demo/App.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script>
-import '../../node_modules/bootstrap/dist/css/bootstrap.css';
+import './tailwind.css';
 import { Bootstrap4Pagination, Bootstrap5Pagination, TailwindPagination } from '../lib';
 import RenderToIFrame from './components/RenderToIFrame';
 
@@ -149,13 +149,6 @@ export default {
 
             return 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
         },
-        scriptUrl() {
-            if (this.style === 'tailwind') {
-                return 'https://cdn.tailwindcss.com';
-            }
-
-            return '';
-        },
     },
 
     mounted () {

src/demo/components/RenderToIframe.js

@@ -1,4 +1,4 @@
-import { h, ref, createApp, onMounted, onBeforeUpdate } from 'vue';
+import {h, ref, createApp, onMounted, onBeforeUpdate} from 'vue';
 
 export default {
     name: 'RenderToIFrame',
@@ -7,21 +7,18 @@ export default {
             type: String,
             default: '',
         },
-        scriptUrl: {
-            type: String,
-            default: '',
-        },
     },
     setup(props, { slots }) {
         const iframeRef = ref(null);
         const iframeBody = ref(null);
         const iframeHead = ref(null);
         const iframeCSS = ref(null);
-        const iframeScript = ref(null);
         const iframeStyle = ref(null);
         let iframeApp = null;
 
-        onMounted(() => {
+        onMounted(async () => {
+            const tailwindCss = await import('../tailwind.css');
+
             iframeBody.value = iframeRef.value.contentDocument.body;
             iframeHead.value = iframeRef.value.contentDocument.head;
             const el = document.createElement('div');
@@ -32,7 +29,7 @@ export default {
             iframeHead.value.appendChild(iframeCSS.value);
             iframeStyle.value = document.createElement('style');
             iframeStyle.value.innerHTML =
-                'body { margin: 0; padding: 10px; background: #f8f9fa; }';
+                'body { margin: 0; padding: 10px; background: #f8f9fa; }' + tailwindCss.default;
             iframeHead.value.appendChild(iframeStyle.value);
 
             iframeApp = createApp({
@@ -42,21 +39,14 @@ export default {
                 },
             }).mount(el);
         });
+
         onBeforeUpdate(() => {
             if (!iframeApp || !iframeRef.value) {
                 return;
             }
             iframeCSS.value.href = props.cssUrl;
-            if (props.scriptUrl) {
-                iframeScript.value = document.createElement('script');
-                iframeScript.value.id = 'custom-script';
-                iframeScript.value.src = props.scriptUrl;
-                iframeHead.value.appendChild(iframeScript.value);
-            } else {
-                document.getElementById('custom-script')?.remove();
-                iframeScript.value = null;
-            }
         });
+
         return () => h('iframe', { ref: iframeRef });
     },
 };

src/demo/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.vue',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
+}