Working with DaisyUI

[LeeStamper]

Forgive me if this is obvious to the more experienced, but for those that use DaisyUI like me after some debugging I discovered that DaisyUI bundles a Tailwind base reset that strips list markers and normalizes text styles.

So I needed to add this to my app/assets/tailwind/application.css so the preview and rich text worked with the Daisy styles. Hope it helps!

/* Lexxy + DaisyUI integration */
@layer components {
  .lexxy-prose,
  .lexxy-content,
  lexxy-editor .lexxy-editor__content {
    @apply prose max-w-none;
    --tw-prose-body: var(--color-base-content);
    --tw-prose-headings: var(--color-base-content);
    --tw-prose-bullets: var(--color-base-content);
    --tw-prose-links: var(--color-primary);
    --tw-prose-bold: var(--color-base-content);
    --tw-prose-code: var(--color-base-content);
    --tw-prose-pre-code: var(--color-base-100);
    --tw-prose-pre-bg: var(--color-base-content);
    color: var(--color-base-content);
  }
}

@layer utilities {
  /* Minimal strikethrough support for Lexxy preview */
  lexxy-editor .lexxy-editor__content [data-lexical-strikethrough="true"],
  lexxy-editor .lexxy-editor__content .lexxy-content__strikethrough,
  lexxy-editor .lexxy-editor__content span[style*="line-through"],
  lexxy-editor .lexxy-editor__content s,
  lexxy-editor .lexxy-editor__content del,
  lexxy-editor .lexxy-editor__content strike {
    text-decoration: line-through;
  }

  lexxy-editor .lexxy-editor__content .lexxy-content__italic { font-style: italic; }
  lexxy-editor .lexxy-editor__content .lexxy-content__bold { font-weight: 700; }

  lexxy-editor .lexxy-editor__content h1 {
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: 600;
  }
  lexxy-editor .lexxy-editor__content h2 {
    font-size: 1.5rem;
    line-height: 1.875rem;
    font-weight: 600;
  }
  lexxy-editor .lexxy-editor__content h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
  }

  .lexxy-content ul,
  lexxy-editor .lexxy-editor__content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-block: 0.75rem;
    list-style-position: outside;
  }

  .lexxy-content ol,
  lexxy-editor .lexxy-editor__content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-block: 0.75rem;
    list-style-position: outside;
  }
}