New Typography Component

[GNITOAHC]

The current Typography just show us the way to do it, but some component can't be styled manually e.g. rendering MDX.
I think we could add a CLI option to add something like this?

npx shadcn@latest add prose

@layer components {
  .prose {
    h1:not(h1.not-prose, .not-prose h1) {
      @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
    }
    h2:not(h2.not-prose, .not-prose h2) {
      @apply mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0 mb-2;
    }
    h3:not(.not-prose h3, .not-prose h3) {
      @apply mt-8 scroll-m-20 text-2xl font-semibold tracking-tight;
    }
    h4:not(.not-prose h4, .not-prose h4) {
      @apply scroll-m-20 text-xl font-semibold tracking-tight;
    }
    p:not(p.not-prose, .not-prose p) {
      @apply leading-7 [&:not(:first-child)]:mt-6;
    }
    blockquote:not(blockquote.not-prose, .not-prose blockquote) {
      @apply mt-6 border-l-2 pl-6 italic;
    }
    table:not(table.not-prose, .not-prose table) {
      @apply w-full;
    }
    tr:not(tr.not-prose, .not-prose tr) {
      @apply m-0 border-t p-0 even:bg-muted;
    }
    th:not(th.not-prose, .not-prose th) {
      @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
    }
    td:not(td.not-prose, .not-prose td) {
      @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
    }
    ul:not(ul.not-prose, .not-prose ul) {
      @apply my-6 ml-6 list-disc [&>li]:mt-2;
    }
    ol:not(ol.not-prose, .not-prose ol) {
      @apply my-6 ml-6 list-decimal [&>li]:mt-2;
    }
    pre:not(pre.not-prose, .not-prose pre) {
      @apply w-full overflow-y-scroll bg-[#1d283a] text-white rounded py-2 px-4 mb-4 mt-6;
    }
    a:not(a.not-prose, .not-prose a) {
      @apply hover:text-sky-200 underline;
    }
  }
}

This way users can customize it more without using tailwind plugin which makes styling color more difficult.