# Tailwind Controls not available when using "open in wrapper"

**URL:** <https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491>\
**Category:** Bug Reports\
**Created:** [December 21, 2022, 3:18pm UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491 "2022-12-21T15:18:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [December 21, 2022, 3:18pm UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491/1 "2022-12-21T15:18:41Z")

</div>

I noticed that I have access to the tailwind controls when I open the page normally inside the Pinegrow builder, but now when I’m opening it in a wrapper. Is this by design or a bug?

Steps to reproduce.

1. Start a new Tailwind Project
2. Open the index.html file normally and see that you can use the tailwind controls  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0cc4780fa680472a5bc4ac31621ba19d9b686ab0.jpeg)
3. Open the index.html file in a wrapper  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/3cb8d704fa68c365dc9c17eed08b36d5f0ded65c.png)
4. And note that the Tailwind controls are no longer available  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a98631691acaf202415cacf3f13347e147090784.jpeg)

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [December 21, 2022, 4:09pm UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491/2 "2022-12-21T16:09:34Z")

</div>

@adamslowe it appears Tailwind CSS is not detected on the wrapper page. Detection is done by looking for a stylesheet containing “tailwind” in its name. Is the theme using a non-standard name, or scrambled by CDN?

You can manually activate it by running this code in the Dev tools console:

```auto
frames[0].$.fn.crsacss('showFrameworkManager', frames[0].pinegrow.getSelectedPage());

```

to open the Framework manager. We might have to bring this dialog back in.

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [December 21, 2022, 4:14pm UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491/3 "2022-12-21T16:14:41Z")

</div>

Ahh, interesting!

I’m testing Pinegrow and the [Winden](https://dplugins.com/products/winden/) plugin working together and it looks like they are using Javascript to add the CDN. It looks like this is a “them” problem more than a Pinegrow problem, so that’s good to know.

```auto
<!-- Tailwind CSS: CDN -->
<script type="module" id="winden-tailwind-css-cdn">
    let importShim;
    try {
        await (0, eval)('import("")')
    } catch (error) {
        if (error instanceof TypeError) {
            importShim = (0, eval)('u=>import(u)');
        } else {
            var s = document.createElement('script');
            s.src = 'https://unpkg.com/shimport';
            document.head.appendChild(s);
            importShim = __shimport__.load;
        }
    }

    const require = async (m) => {
        let result;
        try {
            result = await importShim('https://cdn.skypack.dev/' + m + '?min');
            console.log('importShim', m, 'success');
            window.countModulesToLoad--;
        } catch (error) {
            console.log('Cannot find module "' + m + '"');
        }
        return result.default || result;
    }

    (async () => {
        console.log('Loading Modules...');

        window.countModulesToLoad = 4;
let shim_5b55b192f52bfe183b17b6d540dc1bb0 = (await require('@tailwindcss/typography'));
let shim_478e11c8d44b15f9e94c007cc50d9c5b = (await require('@tailwindcss/forms'));
let shim_19061aff58693e64426688d4211f85b6 = (await require('flowbite/plugin'));
let shim_9b6791af47f48611a818b54209c27df1 = (await require('daisyui'));

        // Block the execution until modules are loaded
        await new Promise(resolve => {
            console.log('waitingForModulesLoaded. remaining count:', window.countModulesToLoad);
            let waitingForModulesLoaded = setInterval(() => {
                if (
                    window.countModulesToLoad === 0
                ) {
                    var s = document.createElement('script');
                    s.src = 'https://cdn.tailwindcss.com/3.2.4';
                    s.id = 'tailwindcss-cdn';
                    document.head.appendChild(s);
                    clearInterval(waitingForModulesLoaded);
                    resolve();
                }
            }, 50);
        });

        // Block the execution until Tailwind CDN are loaded
        await new Promise(resolve => {
            console.log('Loading Tailwind CDN...');
            let waitingForTailwindLoaded = setInterval(() => {
                if (typeof tailwind !== 'undefined' && tailwind !== undefined) {
                    console.log('Tailwind CDN loaded');
                    clearInterval(waitingForTailwindLoaded);
                    resolve();
                }
            }, 50);
        });

                tailwind.config = {
	theme: {
		extend: {
			colors: {
				clifford: '#da373d',
			},
			// ...
		},
	},
	plugins: [
		//shim_5b55b192f52bfe183b17b6d540dc1bb0,
    	//shim_478e11c8d44b15f9e94c007cc50d9c5b,
		// flowbite components
		//shim_19061aff58693e64426688d4211f85b6,
		// daisyUI components
		//shim_9b6791af47f48611a818b54209c27df1
	],
	corePlugins: {
		preflight: false,
	}
}
        
        const bc = new BroadcastChannel('winden_channel');
        const cssEl = document.getElementById('winden-tailwind-css-custom-css');

        bc.onmessage = (event) => {
            if (event.data.key === 'global_css') {
                cssEl.innerHTML = event.data.value;
            }
        }
    })();
</script>

<!-- Tailwind CSS: Custom CSS -->
<style type="text/tailwindcss" id="winden-tailwind-css-custom-css">
    @tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .winden-avatar {
        @apply h-12 w-12 rounded-full ring-2 ring-white;
    }
    .winden-card {
        background-color: theme('colors.black');
        border-radius: theme('borderRadius.lg');
        padding: theme('spacing.6');
        box-shadow: theme('boxShadow.xl');
    }
}</style>

```

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [December 21, 2022, 4:19pm UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491/4 "2022-12-21T16:19:33Z")

</div>

@adamslowe they do this on production sites? It is a very un-optimal way to use Tailwind CSS because it gets compiled at run-time in the browser.

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [December 21, 2022, 4:22pm UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491/5 "2022-12-21T16:22:00Z")

</div>

They use the CDN in development mode, then compile it when you switch over to production mode.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e3eca308f4d42ebbe56e50112acdb88058f12a3b.png)

The big benefit of Winden is that it allows us to modify the Tailwind config since Pinegrow doesn’t.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8d663b04b46ef7b39ba23808031c3f57c9ffd864.png)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f9d2dfb18d985bfe98f27f2f16d7dd240c300426.png)

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [December 21, 2022, 4:23pm UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491/6 "2022-12-21T16:23:46Z")

</div>

@adamslowe this makes sense. Thanks for details!

---

<div class="post-metadata">

**Author:** ![suabahasa](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/suabahasa/32/5182_2.png) [@suabahasa](https://forum.pinegrow.com/u/suabahasa)\
**Post date:** [December 23, 2022, 7:54am UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491/8 "2022-12-23T07:54:38Z")

</div>

Hi @matjaz,

I have explored the source code a bit and found an interesting code.

```javascript
// \wp-content\plugins\pinegrow\pinegrow\frameworks\tailwindcss\tailwindcss.js

return e.hasStylesheet(/tailwind/i) || e.hasScript(/cdn\.tailwindcss\.com/i)

```

can we have a variable registered on the **`window.`** scope that we can invoke to force the tailwind detection instead relied on the above snippet code?

For example, we call it on the browser console:

```javascript
window.pgFramework.tailwind.detected = true;
window.pgFramework.tailwind.version = 3;

```

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [December 24, 2022, 2:55am UTC](https://forum.pinegrow.com/t/tailwind-controls-not-available-when-using-open-in-wrapper/7491/9 "2022-12-24T02:55:19Z")

</div>

Hi @suabahasa, detection runs on the source DOM model, without executing JS, so we could not detect this value if it would be set at runtime with JS.

How about we expand the auto detection by searching for script#winden-tailwind-css-cdn"? This would work if the script is visible in View source of the page.