tailwindcss-typography VS BlockNote

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.

We think the headless approach is a big factor in why Tiptap has become so popular, but you are right! You can't just add Tiptap to your project without styling. That's why we're always asked about a drop-in Notion-like styling. We don't offer this, but our community has built something that might help you: https://github.com/TypeCellOS/BlockNote