fix(og-image): resolve v6 takumi renderer CSS and font warnings

Author: Kumzy

app/assets/css/main.css

@@ -1,15 +1,17 @@
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.46.4/dist/style.css';
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.46.4/dist/theme-default.css';
-/* import the necessary styles for Vue Flow to work */
-@import '@vue-flow/core/dist/style.css';
-
-/* import the default theme, this is optional but generally recommended */
-@import '@vue-flow/core/dist/theme-default.css';
 @import 'tailwindcss';
 @import '@nuxt/ui';
 
 /* @import "@nuxt/ui-pro"; */
 
+/*
+ * Tailwind v4 declares --tw-border-style via @property (initial-value: solid),
+ * which nuxt-og-image's takumi renderer doesn't read — expose it at :root so
+ * the OG card borders render instead of being skipped.
+ */
+:root {
+  --tw-border-style: solid;
+}
+
 @theme static {
   --font-sans: 'Public Sans', sans-serif;
 

app/components/OgImage/OgImageBlog.takumi.vue

@@ -12,7 +12,7 @@ withDefaults(
 </script>
 
 <template>
-  <div class="bg-gray-900 w-full h-full flex flex-col">
+  <div class="bg-gray-900 w-full h-full flex flex-col" style="font-family: 'Inter'">
     <div class="absolute top-0 bottom-0 left-26 w-[2px] bg-gray-700" />
     <div class="absolute top-0 bottom-0 right-26 w-[2px] bg-gray-700" />
     <div class="absolute top-12 inset-x-0 h-[2px] bg-gray-700" />

app/components/OgImage/OgImageMain.takumi.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="bg-gray-900 w-full h-full flex flex-col">
+  <div class="bg-gray-900 w-full h-full flex flex-col" style="font-family: 'Inter'">
     <div class="absolute top-0 bottom-0 left-26 w-[2px] bg-gray-700" />
     <div class="absolute top-0 bottom-0 right-26 w-[2px] bg-gray-700" />
     <div class="absolute top-12 inset-x-0 h-[2px] bg-gray-700" />

app/components/OgImage/OgImagePage.takumi.vue

@@ -14,7 +14,7 @@ const clampedDescription = computed(() =>
 </script>
 
 <template>
-  <div class="bg-gray-900 w-full h-full flex flex-col">
+  <div class="bg-gray-900 w-full h-full flex flex-col" style="font-family: 'Inter'">
     <div class="absolute top-0 bottom-0 left-26 w-[2px] bg-gray-700" />
     <div class="absolute top-0 bottom-0 right-26 w-[2px] bg-gray-700" />
     <div class="absolute top-12 inset-x-0 h-[2px] bg-gray-700" />

app/components/OgImage/OgImagePlugin.takumi.vue

@@ -32,7 +32,7 @@ const clampedDescription = computed(() =>
 </script>
 
 <template>
-  <div class="bg-gray-900 w-full h-full flex flex-col">
+  <div class="bg-gray-900 w-full h-full flex flex-col" style="font-family: 'Inter'">
     <div class="absolute top-0 bottom-0 left-26 w-[2px] bg-gray-700" />
     <div class="absolute top-0 bottom-0 right-26 w-[2px] bg-gray-700" />
     <div class="absolute top-12 inset-x-0 h-[2px] bg-gray-700" />

app/components/vueFlow/LitestarWorkflow.vue

@@ -4,6 +4,11 @@ import type { Node, Edge } from '@vue-flow/core'
 import { VueFlow, MarkerType, Position } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { NodeToolbar } from '@vue-flow/node-toolbar'
+// Vue Flow's CSS is only needed where the diagram renders. Importing it here
+// (instead of globally in main.css) keeps its self-referential --vf-node-color
+// out of the global stylesheet that nuxt-og-image's renderer scans.
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
 import ContainerNode from './nodes/ContainerNode.vue'
 import ToolbarNode from './nodes/ToolbarNode.vue'
 import ConfigNode from './nodes/ConfigNode.vue'