docs icon indicating copy to clipboard operation
docs copied to clipboard

`prose-p:text-justify` makes recipe less usable

Open jackwatters45 opened this issue 1 year ago • 1 comments

📚 Subject area/topic

Style rendered Markdown with Tailwind Typography recipe

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/recipes/tailwind-rendered-markdown/

📋 Description of content that is out-of-date or incorrect

Tailwind class prose-p:text-justify is not wrong, but I would suggest it is better off omitted. I copied the recipe's prose component directly into my blog and did not notice the text-justification. It was quite annoying to debug and the recipe would result in a better experience if it was omitted.

---
// src/components/Prose.astro
---
<div
  class="prose dark:prose-invert
  prose-h1:font-bold prose-h1:text-xl
  prose-a:text-blue-600 
- prose-p:text-justify
  prose-img:rounded-xl
  prose-headings:underline">
  <slot />
</div>

Permalink

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

jackwatters45 avatar May 20 '24 19:05 jackwatters45

Hey Jack 👋 I saw your Blog and adjusted the letter spacing - here's the commit && the deployment which looks much better to me.

clearly text-justify works well when paired with letter-spacing. I also tried the same recipe on Astro Blog template without letter-spacing and it went smooth as well. edit: text-wrap helps with some overflows found in mobile devices

tldr: Gotta say no to removing the prose-p:text-justify because of an edge case. Hope you understand, thanks for testing the recipe a lot 🙌

at-the-vr avatar May 26 '24 11:05 at-the-vr