Remark Admonitions Styles

Alternate styling for remark admonitions

Aug 17, 2020

1 minute


Built with

Tailwind CSS
Remark
Next.js

This was a small project I produced while working on my university notes website. The problem I was facing is that the new CSS for remark admonitions is produced with Infima, a CSS framework only used by Docusaurus. My aim was to build these same styles using Tailwind CSS, a much more popular framework, and one that allows compiling to raw CSS.

I did this for the classic style and like how they look, however I decided to move to a solution built with React components and so didn’t progress to make more styles, but I may in the future.

I also created a website to display these styles using Next.js and MDX, this was very simple to set up and doesn’t contain any crazy styling, but serves it’s purpose and gives a good demonstration of what the different variants look like.