TailwindCSS plugin for OpenGraph+
npm install @opengraphplus/tailwind


TailwindCSS v4 plugin that adds variants for styling elements specifically for OpenGraph image generation via OpenGraph+.
``bash`
npm install @opengraphplus/tailwind
In your CSS file where you import TailwindCSS:
`css`
@import "tailwindcss";
@plugin "@opengraphplus/tailwind";
Then use the ogplus: variant on any utility class:
`html
Provider-Specific Variants
Target specific social platforms with provider variants:
`html
Content
Content
`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: - BlueskyHow 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; }
``