← Back to the blog
Tailwind CSS V4 Styling MDX Content

Tailwind CSS V4 Styling MDX Content

Introduction

This guide walks you through integrating Tailwind's utility classes directly in your Markdown files.

The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.

Features images served using next/image component. The locally stored images are located in a folder with the following path: /static/images/canada/[filename].jpg

Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.

Maple

Lake

Mountains

Toronto

Implementation

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2">
    ![Maple](/blog/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2">
    ![Lake](/blog/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2">
    ![Mountains](/blog/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-0.5 xl:w-1/2 xl:px-2">
    ![Toronto](/blog/static/images/canada/toronto.jpg)
  </div>
</div>

With MDX + tailwindcss V4, one can interleave markdown in jsx as shown in the example code.

Community

We're excited to see the community adopt Hyperse-io, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!