Brand new statamic site - partials not using Tailwind

[CarlOgden1967]

Hi

New to Statamic, I've created a brand new site, in layouts, I've added

        <header class="max-w-7xl mx-auto">
            {{ partial:nav }}
        </header>

In my partial, I took sample code for an alpine/tailwind menu structure and made it dynamic

<div x-data="{ isOpen: false }" class="flex justify-between p-4 bg-gray-600 lg:p-8">
    <div class="flex items-center">
        <h3 class="text-2xl font-bold text-white">Logo</h3>
    </div>

    <!-- left header section -->
    <div class="flex items-center justify-between">
        <button @click="isOpen = !isOpen" type="submit">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white lg:hidden" fill="none"
                viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
        <div class="hidden space-x-6 lg:inline-block">
            {{ nav:collection:pages }}
                <a href="{{ url }}" class="text-base text-white ">{{ title }}</a>
            {{ /nav:collection:pages }}
        </div>

        <!-- mobile navbar -->
        <div class="mobile-navbar">
            <!-- navbar wrapper -->
            <div class="fixed left-0 w-full h-48 p-5 bg-white rounded-lg shadow-xl top-16" x-show="isOpen"
                @click.away=" isOpen = false">
                <div class="flex flex-col space-y-6">
                    {{ nav:collection:pages }}
                        <a href="{{ url }}" class="text-sm text-black">{{ title}}</a>
                    {{ /nav:collection:pages }}
                </div>
            </div>
        </div>
        <!-- end mobile navbar -->
    </div>
    <!-- right header section -->
</div>

But none of the tailwind formatting works, unless I put a cdn file in the head of layout - which I don't want to do nor should it be there!

I've ran npn install || npm run dev <- When I run dev and leave it running the site breaks with no tailwindcss, if I ctrl+c then it displays with css in the layout file but the nav doesn't!

To my knowledge, I've not changed anything (other than pro=true)

Any ideas what I've done wrong?

Cheers in advance
Carl.

[jackmcdade]

That's really weird. What about npm run build to do a production-ready compile? Obviously not a permanent solution, just trying to understand what's going on.

[CarlOgden1967]

Hi Jack,

I've run through your course on laracasts and using your topics as reference.

Yes, by running npm run build, doing a fresh, makes that work as expected, like you say, it's not the best, but, if it allows me to continue learning, I can work with that for the time being.

Regards
Carl.

[jackmcdade]

Okay good to know that there’s a working version. When you’re doing `npm run dev`, are there any 404s for your css/js files?

…

On Jun 25, 2023, at 10:28 AM, CarlOgden1967 ***@***.***> wrote: Hi Jack, I've run through your course on laracasts and using your topics as reference. Yes, by running npm run build, doing a fresh, makes that work as expected, like you say, it's not the best, but, if it allows me to continue learning, I can work with that for the time being. Regards Carl. — Reply to this email directly, view it on GitHub <#8347 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAK5Q3RY6NIX56KSFIBWDTXNBDJLANCNFSM6AAAAAAZSLVKVE>. You are receiving this because you commented.

[CarlOgden1967]

Hi Jack,

I get

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
tutorial02.test/:8     GET http://127.0.0.1:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT
tutorial02.test/:8     GET http://127.0.0.1:5173/resources/js/site.js net::ERR_BLOCKED_BY_CLIENT
tutorial02.test/:8     GET http://127.0.0.1:5173/resources/css/site.css net::ERR_BLOCKED_BY_CLIENT

Not sure how to resolve this?
Regards
Carl,

[duncanmcclean]

Are you using an ad-blocker? Try disabling it for that site.

[CarlOgden1967]

Hi Duncan,

Thanks for that, it appears that Brave by default has a "Shields", which I wasn't aware of, I've turned this off for my site and it's now working as expected!

Regards
Carl.

[CarlOgden1967]

Brave had "Shield" On - turn this off and all is working