So even though I have built a website using MDX & Next.js, Cram, a review website for AP calculus, I didn't really incoperate my styling properly which lead me to use custom react components for everything, but now I've finally figured out how to use the stack properly, MDX, TailwindCSS, and Next.js.

When I rendered the file using next-mdx-remote, I had to put inside a div with a specific classname:

<div classname="prose">
  <MDXRemote {...source} components={components} />
</div>

Another thing I was missing was the TailwindCSS plugin @tailwindcss/typography which doesn't break the nature of the MDX file.

How It All Started

What first inspired me to use MDX was when I was watching Lee Robinson's video on him explaining how he built his personal website using MDX, Javascript, and TailwindCSS. During that time I also wanted to build something for me to help review all the recent units we covered in AP Calculus.

So I decided to build a website that would allow me to write my notes in markdown and then render them as a blog post. However, little did I know how diffcult it woudld be.

When I almost finshed building the majority of the app, I realized that I wasn't able to use the MDX the way I imagined due to me not doing what I mentioned above. I spent hours trying to fix bu eventually I decided to not to waste more time and started building custom react components for sytling.

Here's an example:

How It All Ended

After some time I decided that I would redesign my personal website and looked for some design inpiration. After comming across a few websites, I started to sketch in mind what I wanted to build and I was inspired by the design of the blog theme Nextra.

As I was starting to complete the design for all my static pages, I decided that I would include a blog/journal section to make the website different from my old one, so I went back to MDX tech stack mentioned before.

Not suprisingly I ran into the same problem I had before, but this time I encountered a very useful stackoverflow post that helped me fix the problem. After realizing what I had to do, I was able to get the MDX files to render properly, and finally finished building my website!

Final Thoughts

Reflecting upon this, I remembered a very famous developer quote and finally realize it's importance and value.

If you can't find a solution to your bug, then you haven't looked at the right Stack Overflow post.