Styles for headings, paragraphs, lists, and more using tailwind CSS @tailwindcss/typography (https://github.com/tailwindlabs/tailwindcss-typography) plugin

styles.css

.prose {
  --prose-color: var(--muted-foreground);
  --prose-heading-color: var(--foreground);
  --prose-strong-color: var(--foreground);
  --prose-link-color: var(--foreground);
  --prose-code-color: var(--foreground);
  --prose-marker-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
  --prose-link-underline-color: var(--primary);
  --prose-th-borders: var(--border);
  --prose-td-borders: color-mix(in oklab, var(--border) 75%, transparent);
  --prose-hr-color: var(--border);
  --prose-blockquote-border-color: var(--border);

  color: var(--prose-color);
  font-size: var(--text-sm);
  line-height: 1.75;
}

.prose *:where(:not(.not-prose, .not-prose *)) + *:where(:not(.not-prose, .not-prose *)) {
  margin-top: calc(var(--spacing) * 5);
}

.prose h1:where(:not(.not-prose, .not-prose *)) {
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--prose-heading-color);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 16);
}

.prose h2:where(:not(.not-prose, .not-prose *)) {
  font-size: var(--text-xl);
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--prose-heading-color);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 14);
}

.prose h3:where(:not(.not-prose, .not-prose *)) {
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--prose-heading-color);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 12);
}

.prose h4:where(:not(.not-prose, .not-prose *)) {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--prose-heading-color);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 10);
}

.prose p:where(:not(.not-prose, .not-prose *)) {
  margin-top: calc(var(--spacing) * 5);
}

.prose ul:where(:not(.not-prose, .not-prose *)),
.prose ol:where(:not(.not-prose, .not-prose *)) {
  padding-left: calc(var(--spacing) * 6);
}

.prose ul:where(:not(.not-prose, .not-prose *)) {
  list-style-type: disc;
}

.prose ol:where(:not(.not-prose, .not-prose *)) {
  list-style-type: decimal;
}

.prose li + li:where(:not(.not-prose, .not-prose *)) {
  margin-top: calc(var(--spacing) * 3);
}

.prose a:where(:not(.not-prose, .not-prose *)) {
  color: var(--prose-link-color);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--prose-link-underline-color);
}

.prose strong:where(:not(.not-prose, .not-prose *)) {
  color: var(--prose-strong-color);
  font-weight: var(--font-weight-semibold);
}

.prose code:where(:not(.not-prose, .not-prose *)) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--prose-code-color);
  background-color: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

.prose blockquote:where(:not(.not-prose, .not-prose *)) {
  font-style: italic;
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--prose-blockquote-border-color);
  padding-inline-start: calc(var(--spacing) * 4);
}

.prose hr:where(:not(.not-prose, .not-prose *)) {
  border-color: var(--prose-hr-color);
  margin-top: calc(var(--spacing) * 12);
  margin-bottom: calc(var(--spacing) * 12);
}

.prose :first-child:where(:not(.not-prose, .not-prose *)) {
  margin-top: 0;
}

.prose :last-child:where(:not(.not-prose, .not-prose *)) {
  margin-bottom: 0;
}


/* 
How to use it in your tailwind css typegraphy plugin

Example 1

<div class="prose">
  <h1>Your heading</h1>
  <p>Your paragraph text goes here...</p>
  <div class="not-prose">
    <p>This is not styled.</p>
  </div>
</div> 
*/