tailwindcss-typography VS Tailwind CSS

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.

Styling: Tailwind CSS v4 (using the new experimental v4 or latest v3 features for utility-first styling)

Styling: Tailwind CSS

Technology Stack: I used Next.js 14 with App Router for the web framework, TypeScript for type safety, Tailwind CSS for the neon-gothic horror UI, Google Gemini AI for monster assignment and image transformation and Kiro IDE with spec-driven development for structured implementation.

TailwindCSS

Tailwind CSS – Utility-first CSS.

In this article, I'll share my thoughts on why Generative AIs struggle to create good layouts, and how TailwindCSS helps them overcome this challenge.

Frontend: Vue.js, Nuxt.js, TypeScript, Vuetify, Tailwind CSS

Tailwind CSS is a utility-first CSS framework that uses PostCSS to process special directives and generate styles on demand. Unlike traditional CSS frameworks, Tailwind doesn't provide pre-built components. Instead, it gives you low-level utilities that you compose together to build designs.