tailwind-react-next.js-typescript-eslint-jest-starter VS tailwindcss-typography

Tailwind-NEXT-TypeScript starter template - An absolute lifesaver!

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.

Typography is a Tailwind plugin that helps you easily style long blocks of text, like blog posts. It gives text a readable look without any extra effort from you. But why would you need any help? Tailwind applies a set of CSS reset rules to your project that makes most unstyled HTML elements look like plain text, and to fix this, you have to style all of them again from scratch.

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

While we could have used the Tailwind CSS Typography plugin, we chose this solution to have more control over the tag styles and avoid overriding the plugin’s default styles. Since this demo utilizes only a few elements, this choice is appropriate.

Before rendering the BlogPost, we can also style some of it using Tailwind Typography

This will ensure we only have two themes, The default dark and default light theme. One more plugin that we will use is the tailwind typography plugin, this will automatically add styles to certain elements such as p tags, heading tags, code tags etc. Read more about it here.