Cannot use scoped styling for custom templates

[Bumbleboss]

Describe the bug

In docs, its seen you can use scoped styling. https://nuxtseo.com/og-image/getting-started/your-first-template

It doesn't seem to work on my end, unsure why. Code

<template>
    <h1>{{ title }}</h1>
</template>

<script setup lang="ts">
    interface Props {
    title: string
    }

    defineProps<Props>()
</script>

<style scoped lang="scss">
    h1 {
    color: blue;
    }
</style>

Reproduction

No response

System / Nuxt Info

------------------------------
- Operating System: Linux
- Node Version:     v18.17.1
- Nuxt Version:     3.7.3
- CLI Version:      3.8.4
- Nitro Version:    2.6.3
- Package Manager:  bun@1.0.1
- Builder:          -
- User Config:      runtimeConfig, site, typescript, ogImage, css, vite, modules, app
- Runtime Modules:  @nuxt/content@2.8.2, @nuxtseo/module@2.0.0-beta.15, @nuxthq/studio@0.13.4
- Build Modules:    -
------------------------------

[harlan-zw]

Thanks for the issue. Please try out the latest version of @nuxtseo/module v2.0.0-beta.34 and let me know if ti works any better.

[KyleSmith0905]

Tried out version v2.0.0-beta.34, and version v2.0.0-beta.37, neither worked. Minimum reproducible example (It's just an empty project with @nuxtseo/module installed and used): https://github.com/KyleSmith0905/mre--og-image-custom-tailwind (sorry, repo name is inaccurate, lol)

[mitjans]

I confirm this is still not working with version 3.0.0-rc.2

[harlan-zw]

I confirm this is still not working with version 3.0.0-rc.2

Can you provide your template or a reproduction to verify?

[mitjans]

It doesn't seem to be consistent right now. Sometimes I get an error when declaring a custom class like this:

<template>
  <div class="flex w-full bg-neutral-950 text-neutral-100">
    <div class="radial-grid fixed inset-0"></div>
  </div>
</template>

<style scoped>
.radial-grid {
  background-image: radial-gradient(circle, #ffffff 1px, rgba(0, 0, 0, 0) 1px);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0px, transparent 100%);
}
</style>

`radial-grid` unknown or invalid utility

But other times it works correctly. I'll continue investigating later today 👍

[harlan-zw]

Okay going to close this again, this seems unrelated to the OP. Please open a new issue with a reproduction when available and I'll make sure it gets fixed.