Vue
Styling
Style Vue policy components with CSS variables, Tailwind, or custom components
There are three ways to style policy components.
Method 1: CSS variables
When you use <OpenPolicy>, default styles are injected automatically. Override variables on .op-policy:
.op-policy {
--op-font-family: "Inter", sans-serif;
--op-font-size-body: 0.9375rem;
--op-body-color: #1f2937;
--op-heading-color: #111827;
--op-link-color: #7c3aed;
--op-link-color-hover: #6d28d9;
--op-section-gap: 2.5rem;
}Method 2: Tailwind
Rendered nodes include data-op-* attributes, so you can target them with Tailwind arbitrary variants:
<template>
<div
class="**:data-op-section:mb-10 **:data-op-section:border-b **:data-op-section:border-gray-200 **:data-op-section:pb-10 **:data-op-heading:text-xl **:data-op-heading:font-semibold **:data-op-heading:mb-4 **:data-op-paragraph:text-sm **:data-op-paragraph:text-gray-500 **:data-op-paragraph:leading-relaxed"
>
<PrivacyPolicy />
</div>
</template>Method 3: Custom components
Use the components prop to replace individual renderers:
<script setup lang="ts">
import { h } from "vue";
import { OpenPolicy, PrivacyPolicy } from "@openpolicy/vue";
import openpolicy from "./openpolicy";
const components = {
Heading: ({ node }: { node: { value: string } }) =>
h("h2", { class: "text-2xl font-bold" }, node.value),
};
</script>
<template>
<OpenPolicy :config="openpolicy">
<PrivacyPolicy :components="components" />
</OpenPolicy>
</template>