# Tailwind CSS ## Getting Started ## Static sites OpenGraph+ works best with dynamic frameworks like Rails, Django, or Next.js where meta tags are generated per-request. For static sites, you'll need to generate and paste meta tags for each page. ## Install the CLI Install the OpenGraph+ CLI from your terminal: ```sh curl -sSL https://ogplus.terminalwire.sh/ | bash ``` ## Generate meta tags for each page Run the CLI to generate meta tags for a page: ```sh ogplus meta $OGPLUS__WEBSITE_HOST ``` Copy the output into your page's ``: ```html ``` Repeat for each page on your site: ```sh # These pages might not exist on your site ogplus meta $OGPLUS__WEBSITE_HOST/about ogplus meta $OGPLUS__WEBSITE_HOST/contact ogplus meta $OGPLUS__WEBSITE_HOST/pricing ogplus meta $OGPLUS__WEBSITE_HOST/blog ogplus meta $OGPLUS__WEBSITE_HOST/blog/hello-world ``` This manual process is required for static sites. For a better experience, consider using a dynamic framework like Rails, Django, or Next.js where meta tags are generated automatically per-request. ## Publish and verify Publish your site, then use the preview tool to verify your social cards render correctly. ## Installation Install the plugin from npm: ```sh npm install @opengraphplus/tailwind ``` ## Tailwind 4 Import the plugin in your CSS file: ```css @import "tailwindcss"; @plugin "@opengraphplus/tailwind"; ``` ## Tailwind 3 Add the plugin to your Tailwind config: ```js // tailwind.config.js module.exports = { plugins: [require('@opengraphplus/tailwind')], } ``` ## Verify installation Add `ogplus:hidden` to any element and check that the class compiles without errors. The element will be hidden only during OpenGraph+ screenshot capture. ## Usage Prefix any Tailwind utility with `ogplus:` to apply it only during social card screenshots. ## Hide elements Remove navigation, footers, and other clutter from your social cards. ```html
Hidden in screenshots
``` ## Show elements only in screenshots Combine `hidden` with `ogplus:block` to create screenshot-only content—like a custom hero designed specifically for social sharing. ```html ``` ## Adjust styling Apply any utility—padding, typography, colors—specifically for social cards. ```html
Content with larger text in screenshots

Bigger headline in social cards

More padding and a gradient in screenshots
``` ## Platform-specific styling Target individual platforms with `ogplus-{platform}:` variants. ```html
Different styles per platform
Hidden only on Twitter
``` Available platform variants: - `ogplus-twitter:` — Twitter/X - `ogplus-linkedin:` — LinkedIn - `ogplus-facebook:` — Facebook - `ogplus-discord:` — Discord - `ogplus-whatsapp:` — WhatsApp - `ogplus-apple:` — Apple Messages - `ogplus-bluesky:` — Bluesky ## How It Works The plugin creates custom variants that target the `data-ogplus` attribute. ## The data attribute When OpenGraph+ captures your page as a social card, it adds a `data-ogplus` attribute to the `` element: ```html ``` This attribute only exists during screenshot capture—regular visitors never see it. ## Generated CSS The `ogplus:` variant generates CSS that targets this attribute: ```css /* ogplus:hidden generates */ html[data-ogplus] .ogplus\:hidden { display: none; } /* ogplus-twitter:bg-sky-500 generates */ html[data-ogplus="twitter"] .ogplus-twitter\:bg-sky-500 { background-color: #0ea5e9; } ``` ## Custom CSS For styles beyond what utilities provide, you can write custom CSS targeting the same attribute. See [Data Attributes](/docs/html-css/data-attributes) for details. ## Updates The OpenGraph+ Tailwind plugin includes variants for all supported social platforms. When we add support for new platforms, you'll need to update the plugin to get the new variants. ## Checking for updates ```sh npm outdated @opengraphplus/tailwind ``` ## Updating ```sh npm update @opengraphplus/tailwind ``` ## What's in updates Updates typically include: - New platform variants (e.g., `ogplus-newplatform:`) - Bug fixes for existing variants - Compatibility with new Tailwind versions ## Changelog Check the [npm package page](https://www.npmjs.com/package/@opengraphplus/tailwind) for release notes and version history.