Tufte CSS VS tailwindcss-typography

As it is often said in various designer forums, please avoid pure white (#FFFFFF) on black (here #111111), as it makes the text glow for the human eyes (therefore making it unreadable for long text). Instead, try to lower a bit the contrast on the text color.

Also, the dispositions for the buttons at the beginning (GitHub, NPM, ...) are not adjusted correctly for keyboard navigation (each button requires two tabs).

Appart from that, I do like a minimalist stylesheet, so I will also recommend Tufte CSS [0] for readers.

[0]: https://github.com/edwardtufte/tufte-css

CSS and HTML is great for documents - not so great for applications. Most sites end up implementing their own navigation UI/UX at a minimum (an application) - many end up as more applications.

For an example of "documents", see eg:

https://edwardtufte.github.io/tufte-css/

Or

https://alistapart.com/article/building-books-with-css3/

Just for kicks, I applied Tufte CSS[0] onto the page using a browser extension. Great ROI.

0. https://edwardtufte.github.io/tufte-css/

It's not the answer you're looking for, but https://edwardtufte.github.io/tufte-css/ might be of interest to you

A famous physicist, Richard Feynman, had a practice in his his extensive writing, e.g. a three-volume physics text, to use the methodology of sentences which then cumulate sequentially into paragraphs. (ht Ed Tufte)

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.

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.

Are you talking about Typography? If yes, that's what I'm using to pretty-print the HTML, which was generated using the above technique.

i also mostly cannot change layout since i use @tailwind/typography which requires a specific layout.

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