# Using Tailwind CSS with your OG Image

**Author:** DX Team

---

You can use the following code sample to explore using parameters and different content types with [`next/og`](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx). To learn more about OG Image Generation, see [Open Graph Image Generation](https://vercel.com/docs/og-image-generation).

Create an API route handler:

`import { ImageResponse } from 'next/og'; // App router includes @vercel/og. // No need to install it. export async function GET() { return new ImageResponse( ( // Modified based on https://tailwindui.com/components/marketing/sections/cta-sections <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', }} > <div tw="bg-gray-50 flex"> <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8"> <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left"> <span>Ready to dive in?</span> <span tw="text-indigo-600">Start your free trial today.</span> </h2> <div tw="mt-8 flex md:mt-0"> <div tw="flex rounded-md shadow"> <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white" > Get started </a> </div> <div tw="ml-3 flex rounded-md shadow"> <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600" > Learn more </a> </div> </div> </div> </div> </div> ), { width: 1200, height: 630, }, ); }`

`import { ImageResponse } from 'next/og'; // App router includes @vercel/og. // No need to install it. export async function GET() { return new ImageResponse( ( // Modified based on https://tailwindui.com/components/marketing/sections/cta-sections <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', }} > <div tw="bg-gray-50 flex"> <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8"> <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left"> <span>Ready to dive in?</span> <span tw="text-indigo-600">Start your free trial today.</span> </h2> <div tw="mt-8 flex md:mt-0"> <div tw="flex rounded-md shadow"> <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white" > Get started </a> </div> <div tw="ml-3 flex rounded-md shadow"> <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600" > Learn more </a> </div> </div> </div> </div> </div> ), { width: 1200, height: 630, }, ); }`

> If you're not using a framework, you must either add `"type": "module"` to your `package.json` or change your JavaScript Functions' file extensions from `.js` to `.mjs`

Preview the OG route locally by running the following command:

`pnpm dev`

Then, browse to `http://localhost:3000/api/og`. You will see the following image:

## More resources

- [Consume the OG route](/docs/og-image-generation#consume-the-og-route)
  
- [Getting started with OG image](/docs/og-image-generation#usage)

---

[View full KB sitemap](/kb/sitemap.md)