tailwindcss-typography VS Next.js

At this point the markdown may be rendered, but styles will not be applied. To fix that, you need to import prismjs styles. If you’re using Tailwind, you’ll also want to add tailwindcss-typography for that extra polish (and apply the prose css class where you rendered the blogs). Depending on your Tailwind version (mine’s 4+), you’ll need to edit your style.css.

Recently, while building a personal blog started with Tailwind CSS v3.4, I was faced with the need to upgrade to the latest version of the utility-first library. Though this migration guide was helpful, I couldn't find resources to include plugins such as @tailwindcss/typography (needed for the prose-related rules) and @tailwindcss/forms (needed for form elements). Hence this article. It will be a short ride.

prose class from the official Typography plugin made our flagship article a well-formatted piece of content instantly.

Tailwind's Typography plugin.

To enable viewing MDX files in our app, lets install MDX. We should also install our other helper which is tailwindcss/typography as a dev dependency. This'll be useful later for auto styling the blog post.

3. Setup react-markdown and @tailwindcss/typography

The typography plugin which comes out of tailwind gives a clean readable experience in my opinion. https://tailwindcss.com/docs/typography-plugin

This is the text before the plugin: This is the text after applying the plugin: You can play with the demo here, and check out more ways to use it in the Typography documentation.

2. Use typography plugin

We've been using https://tailwindcss.com/docs/typography-plugin with Tiptap and it's worked great so far.

6. Next.js + Vercel: The Full-Stack Framework That Actually Ships

You're minding your own business, managing AWS infrastructure for a client with a pretty standard e-commerce setup: a Medusa.js backend, a Next.js storefront, and most importantly for this story, a PostgreSQL RDS instance safely stashed away in a private subnet where nothing from the outside world can touch it. Exactly how the AWS gods intended.

Turbopack is now powering vercel.com, nextjs.org, and a growing number of real-world apps. It’s clearly the future written in Rust, blazing through cold builds, and supposedly replacing Webpack altogether.

next — Next.js framework providing SSR, routing, and server functions.

3. Next.js and React (Frontend framework)

My primary passion is backend development, but I wanted to build a user-friendly frontend to complete this project. Given my experience with React, Next.js was the obvious choice due to its excellent documentation and ease of use.

This is a Next.js project bootstrapped with create-next-app.

Official Example: Dynamic Imports