OpenGraph+ Tailwind Plugin


TailwindCSS v4 plugin that adds variants for styling elements specifically for OpenGraph image generation via OpenGraph+.

Installation

``bash
npm install @opengraphplus/tailwind
`

Usage

In your CSS file where you import TailwindCSS:

`css
@import "tailwindcss";
@plugin "@opengraphplus/tailwind";
`

Then use the ogplus: variant on any utility class:

`html









Title


`

Provider-Specific Variants

Target specific social platforms with provider variants:

`html







`

Available provider variants:
- ogplus-linkedin: - LinkedIn
- ogplus-twitter: - Twitter/X
- ogplus-facebook: - Facebook
- ogplus-discord: - Discord
- ogplus-whatsapp: - WhatsApp
- ogplus-apple: - Apple (iMessage, etc.)
- ogplus-bluesky: - Bluesky

How It Works

This plugin adds custom variants that target the data-ogplus attribute on the element. When OpenGraph+ renders your page for image generation, it adds this attribute:

`html





`

The generated CSS uses :where() selectors to match these attributes:

`css
/ ogplus:hidden generates /
:where([data-ogplus]) .ogplus\:hidden { display: none; }

/ ogplus-twitter:bg-blue-500 generates /
:where([data-ogplus="twitter"]) .ogplus-twitter\:bg-blue-500 { background-color: #3b82f6; }
`

Plain CSS Usage

You can also use the data attributes directly in your CSS without Tailwind:

`css
/ Target all OpenGraph renders /
[data-ogplus] .nav,
[data-ogplus] .footer { display: none; }

[data-ogplus] .hero { padding: 60px; background: #0f172a; }

/ Target specific providers /
[data-ogplus="linkedin"] .hero { padding: 80px; }
[data-ogplus="twitter"] .hero { background: #1da1f2; }
``