Tailwind Remark Admonitions

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 its purpose and gives a good demonstration of what the different variants look like.