Text Formatting using Tailwind

article.tsx

export const Prose = ({ children }: { children: React.ReactNode }) => {
  return (
    <div className="text-base leading-[1.6] *:mb-4 *:last:mb-0 lg:*:mb-6 **:[h1]:text-3xl lg:**:[h1]:text-4xl **:[h2]:text-2xl **:[h1,h2,h3,h4]:font-[700] **:[h1,h2,h3,h4]:text-pretty **:[h1,h2,h3,h4]:tracking-tight **:[h1,h2,h3,h4]:text-contrast-high **:[h1,h2,h3,h4]:mt-8 lg:**:[h1,h2,h3,h4]:mt-10 **:[ul,ol]:pl-[1em] **:[ol]:list-[decimal] **:[li]:marker:text-contrast-medium/25 **:[img]:rounded-md **:[img]:shadow-md **:[img]:ring-1 **:[img]:ring-black/2.5 **:[figcaption]:text-contrast-low **:[figcaption]:mt-3 **:[figcaption]:text-sm **:[figcaption]:leading-[1.4] **:[figcaption]:text-center **:[figcaption]:text-pretty **:[figure]:mb-5 lg:**:[figure]:mb-8 **:[a]:text-primary **:[a]:hover:underline" data-prose>
      {children}
    </div>
  )
}