I'm using AMP on NextJs and am trying to insert in my head tag. I managed to get it into the head tag but the rendered html returns an empty
<style amp-custom></style>
and instead booted all of my minified style css out into a separate style tag without the attribute 'amp-custom', thats why the validation did not pass.
Here is how I did it;
<Head>
{isAmp ? (
<>
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>
<style amp-custom>
{`amp-img.nav-logo{margin:10px;margin-top:13px}.bg-primary-color{background-color:#ff4e4e}.bg-white{background-color:#fff}.px-3{padding-right:.75rem;padding-left:.75rem}.pb-3{padding-bottom:.75rem}.p-4{padding:1rem}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}.detail-container{margin:0 auto;margin-top:16px;margin-bottom:16px;padding-right:16px;padding-left:16px}`}
{/* {`${Global} ${OutletDetail} ${InfoCardStyle}`} */}
</style>
</>
) : (
undefined
)}
<SEO />
</Head>
and here is what is rendered;
Any advise on what I'm doing wrong?
