typography

...
import typography from 'https://esm.sh/@tailwindcss/typography'
...

 plugins: [
        ...
        typography,
        ....
    ],

<div class="prose">
  <h1>Título Principal</h1>
  <p>Este es un párrafo de ejemplo para demostrar la tipografía en acción.</p>
</div>

<div class="prose max-w-none">
  <h1>Título Principal</h1>
  <p>Este es un párrafo de ejemplo para demostrar la tipografía en acción.</p>
</div>

zinc: {
    css: {
      '--tw-prose-body': colors.zinc[700],
      '--tw-prose-headings': colors.zinc[900],
      '--tw-prose-lead': colors.zinc[600],
      '--tw-prose-links': colors.zinc[900],
      '--tw-prose-bold': colors.zinc[900],
      '--tw-prose-counters': colors.zinc[500],
      '--tw-prose-bullets': colors.zinc[300],
      '--tw-prose-hr': colors.zinc[200],
      '--tw-prose-quotes': colors.zinc[900],
      '--tw-prose-quote-borders': colors.zinc[200],
      '--tw-prose-captions': colors.zinc[500],
      '--tw-prose-kbd': colors.zinc[900],
      '--tw-prose-kbd-shadows': hexToRgb(colors.zinc[900]),
      '--tw-prose-code': colors.zinc[900],
      '--tw-prose-pre-code': colors.zinc[200],
      '--tw-prose-pre-bg': colors.zinc[800],
      '--tw-prose-th-borders': colors.zinc[300],
      '--tw-prose-td-borders': colors.zinc[200],
      '--tw-prose-invert-body': colors.zinc[300],
      '--tw-prose-invert-headings': colors.white,
      '--tw-prose-invert-lead': colors.zinc[400],
      '--tw-prose-invert-links': colors.white,
      '--tw-prose-invert-bold': colors.white,
      '--tw-prose-invert-counters': colors.zinc[400],
      '--tw-prose-invert-bullets': colors.zinc[600],
      '--tw-prose-invert-hr': colors.zinc[700],
      '--tw-prose-invert-quotes': colors.zinc[100],
      '--tw-prose-invert-quote-borders': colors.zinc[700],
      '--tw-prose-invert-captions': colors.zinc[400],
      '--tw-prose-invert-kbd': colors.white,
      '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
      '--tw-prose-invert-code': colors.white,
      '--tw-prose-invert-pre-code': colors.zinc[300],
      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
      '--tw-prose-invert-th-borders': colors.zinc[600],
      '--tw-prose-invert-td-borders': colors.zinc[700],
    },
  },

.prose-custom {
	@apply max-w-none prose; 
	@apply prose-headings:font-serif prose-headings:text-emerald-700; 
	@apply prose-strong:text-gray-600 prose-em:text-gray-600 prose-p:text-gray-600; 
	@apply prose-a:text-emerald-700 hover:prose-a:text-emerald-900; 
	@apply prose-li:text-gray-600 prose-ul:list-inside prose-ol:list-inside prose-li:marker:text-emerald-700; 
	@apply prose-img:w-full prose-img:border prose-img:p-1 prose-th:bg-emerald-700; 
	@apply prose-th:text-white prose-th:font-sans prose-th:p-2 prose-table:border prose-td:p-2;  
	@apply prose-blockquote:pl-4 prose-blockquote:py-2 prose-blockquote:text-gray-500 prose-blockquote:border-emerald-500 prose-blockquote:font-light;
}

  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.700'),
            a: {
              color: theme('colors.blue.500'),
              '&:hover': {
                color: theme('colors.blue.700'),
              },
            },
            h1: {
              fontWeight: '700',
              letterSpacing: theme('letterSpacing.tight'),
              color: theme('colors.gray.900'),
            },
            h2: {
              fontWeight: '600',
              letterSpacing: theme('letterSpacing.tight'),
              color: theme('colors.gray.900'),
            },
            h3: {
              fontWeight: '500',
              color: theme('colors.gray.900'),
            },
            blockquote: {
              fontStyle: 'italic',
              color: theme('colors.gray.600'),
              borderLeftColor: theme('colors.gray.200'),
            },
            'ul > li::before': {
              backgroundColor: theme('colors.gray.400'),
            },
            // Más personalizaciones...
          },
        },
      }),
    },
  },

theme: {
    extend: {
      typography: (theme) => ({
        // Variante personalizada
        primary: {
          css: {
            color: theme('colors.gray.800'),
            a: {
              color: theme('colors.blue.600'),
              '&:hover': {
                color: theme('colors.blue.800'),
              },
            },
            h1: {
              fontSize: '2.5rem',
              fontWeight: '700',
              color: theme('colors.red.700'),
            },
            h2: {
              fontSize: '2rem',
              fontWeight: '600',
              color: theme('colors.red.600'),
            },
            p: {
              marginTop: '1.5em',
              marginBottom: '1.5em',
              lineHeight: '1.75',
            },
            blockquote: {
              fontStyle: 'italic',
              color: theme('colors.gray.600'),
              borderLeftColor: theme('colors.gray.300'),
              borderLeftWidth: '0.25rem',
              paddingLeft: '1rem',
            },
            'ul > li::before': {
              backgroundColor: theme('colors.gray.500'),
            },
            // Más personalizaciones...
          },
        },
      }),
    },
  },

theme: {
    extend: {
      typography: (theme) => ({
        // Variante personalizada o a modificar
        primary: {
          css: {
          // CSS en formato JS
            color: theme('colors.gray.800'),
            a: {
              color: theme('colors.blue.600'),
              '&:hover': {
                color: theme('colors.blue.800'),
              },
            },
            h1: {
              fontSize: '2.5rem',
              fontWeight: '700',
              color: theme('colors.red.700'),
            },
            // Más personalizaciones...
          },
        },
      }),
    },
  },

.prose-custom {
  @apply prose;
  @apply text-zinc-800;

  a {
    @apply text-primary hover:text-primary-dark no-underline;
  }

  h1 {
    @apply text-secondary font-bold mt-6 mb-4;
  }

  h2 {
    @apply text-secondary font-semibold mt-5 mb-3;
  }

  h3 {
    @apply text-secondary font-medium mt-4 mb-2;
  }

  p {
    @apply mt-2 mb-4 leading-relaxed;
  }

  p + p {
    @apply mt-4;
  }

  h1 + p,
  h2 + p,
  h3 + p {
    @apply mt-3;
  }

  blockquote {
    @apply italic text-secondary border-l-4 border-secondary-dark pl-4 mt-4 mb-4;
  }

  ul > li::before {
    @apply bg-primary;
  }

  ul,
  ol {
    @apply mt-4 mb-4 pl-6;
  }

  ul > li,
  ol > li {
    @apply pl-2 mb-2;
  }

  code {
    @apply text-secondary-dark bg-zinc-100 px-2 py-1 rounded-md;
  }

  strong {
    @apply text-zinc-900 font-bold;
  }

  hr {
    @apply border-zinc-200 mt-6 mb-6;
  }

  img {
    @apply rounded-md mt-4 mb-4;
  }

  table {
    @apply w-full table-auto text-left mt-4 mb-4;
  }

  th {
    @apply border-b-2 px-3 py-2 bg-zinc-100;
  }

  td {
    @apply border-b px-3 py-2 bg-zinc-50;
  }

}