O Tailwind já possui um ótimo plugin chamado @tailwindcss/typography. Mas o objetivo aqui é criar a nossa própria formatação/estilização para ter mais controle sobre o conteúdo/estilo.

Features do nosso estilo:

• light/dark mode
• design focado na leitura e consumo do conteúdo
• responsividade

mdx.css

---

Vamos ao código.

/*
  Author: Carlos costa
  Dependencies: Tailwind
*/

.mdx {
  @apply w-full
  flex-1
  flex
  flex-col
  gap-6
  max-w-[720px]
  min-w-0
  text-[17px]
  m-auto
  text-black

  lg:m-auto
  md:text-[15px]

  dark:text-zinc-400
  dark:text-opacity-75;
}

/*=======================
Text
========================*/

.mdx strong,
.mdx b {
  @apply text-zinc-800
  dark:text-zinc-400;
}

.mdx blockquote p {
  @apply border-l-2
  px-4
  pt-3
  pb-2
  border-red-600
  text-red-700
  bg-red-50

  dark:border-red-400
  dark:text-red-400
  dark:bg-zinc-900
  dark:border-l;
}

.mdx a {
  @apply text-blue-600
  hover:underline
  break-words

  dark:text-sky-300;
}

/*=======================
Code
========================*/

.mdx p code,
.mdx li code,
.mdx td code {
  @apply font-mono
  text-red-600
  bg-red-50
  px-1
  text-base

  dark:text-orange-300
  dark:bg-zinc-800

  md:text-sm;
}

.astro-code {
  @apply !bg-zinc-800
  text-sm
  !p-[20px];
}

/* width */
.astro-code::-webkit-scrollbar {
  @apply w-[10px]
  h-[10px];
}

/* Track */
.astro-code::-webkit-scrollbar-track {
  @apply bg-transparent;
}

/* Handle */
.astro-code::-webkit-scrollbar-thumb {
  @apply bg-zinc-600
  transition-all;
}

/* Handle on hover */
.astro-code::-webkit-scrollbar-thumb:hover {
  @apply bg-zinc-700;
}

/*=======================
Line
========================*/

.mdx hr {
  @apply border-zinc-300

  dark:border-zinc-800;
}

/*=======================
Heading
========================*/

.mdx h1,
.mdx h2,
.mdx h3,
.mdx h4,
.mdx h5,
.mdx h6 {
  @apply m-0
  text-black
  font-bold

  dark:text-zinc-300;
}

.mdx h2,
.mdx h3,
.mdx h4,
.mdx h5,
.mdx h6 {
  @apply mt-12

  md:mt-10;
}

.mdx h1 {
  @apply text-3xl sm:text-2xl;
}
.mdx h2 {
  @apply text-2xl sm:text-xl;
}
.mdx h3 {
  @apply text-xl sm:text-lg;
}
.mdx h4 {
  @apply text-lg sm:text-base;
}
.mdx h5 {
  @apply text-base;
}
.mdx h6 {
  @apply text-sm;
}

/*=======================
Lists
========================*/

.mdx ol {
  @apply list-decimal;
}

.mdx ul {
  @apply list-disc;
}

.mdx li {
  @apply list-inside
  py-1

  dark:text-zinc-400
  dark:text-opacity-75;
}

.mdx li ul,
.mdx li ol {
  @apply ml-4;
}

/*=======================
Table
========================*/

.mdx table {
  @apply bg-white

  dark:bg-zinc-900;
}

.mdx th,
td {
  @apply text-left
  p-2
  border
  text-base
  border-zinc-300

  dark:border-zinc-800;
}

/*=======================
Image
========================*/

.mdx img {
  @apply object-cover;
}

/*=======================
Expander
========================*/

.mdx summary {
  @apply py-2
  cursor-pointer
  mb-2
  border-b
  text-red-600
  border-red-600

  dark:text-orange-300
  dark:border-orange-300;
}

Para usar basta adicionar a classe .mdx

<div class="mdx">...</div>

Exemplo do mdx com o estilo aplicado

Paragrapth

---

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into

electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Expander

---

Toggle me!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione voluptatem non earum tenetur voluptate. Ut, beatae eius ea quibusdam assumenda sed quaerat aperiam commodi autem distinctio et esse non tempora?

Text

---

Italic - Lorem Ipsum is simply dummy text of the printing and typesetting industry

Bold - Lorem Ipsum is simply dummy text of the printing and typesetting industry

Bold italic - Lorem Ipsum is simply dummy text of the printing and typesetting industry

Link - Lorem Ipsum is simply dummy text of the printing and typesetting industry

Heading

---

Lists

---

Table

---

Tables	Are	Cool
col 1 is	left-aligned	$1600
col 2 is	centered	$12
col 3 is	right-aligned	$1

Code

---

$ apt install nvim

function Person() {
  // we assign `this` to `self` so we can use it later
  var self = this
  self.age = 0

  setInterval(function growUp() {
    // `self` refers to the expected object
    self.age++
  }, 1000)
}

example of inline code

Blockquote

---

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae temporibus laborum est, sed aperiam a, asperiores tempore molestias officiis repudiandae quia odit corporis quasi necessitatibus rem, unde adipisci voluptatum nobis?

SVG Icon

---

Images

---

Youtube

---