When creating the site for Fluency, I figured now was as good a time as any to try out Tailwind CSS. Like all static sites I build nowadays, the site runs on Gatsby, but unfortunately the docs on how to integrate Tailwind with Gatsby are quite complicated...

While building this site in Gatsby using MDX, I noticed that there wasn't any documentation on how to include data from the frontmatter of an MDX document in the document's page layout...

I use Gatsby as a static site generator to build this blog using React. As part of this, I wanted a simple component to display a static image, something like this:

<Image filename="myimage.png" />

Surprisingly, this is hard to do in Gatsby. The default Image component generated by Gatsby uses StaticQuery: