list-style-position: Clarify and illustrate the different text indentation behavior of list-inside vs. list-outside

[tordans]

Clarify that the utility classes not only change the position of the marker, but also how text indentation works.

The third list element is now multi line, so the effect becomes visible. And the intro sentence hints that this util changes more than just the position.

Pages:

• Current: https://tailwindcss.com/docs/list-style-position
• This PR: https://tailwindcss-com-git-fork-tordans-patch-2-tailwindlabs.vercel.app/docs/list-style-position

See also tailwindlabs/tailwindcss#4549 by @jpwynn

Personally, I would even go a step further, and reverse the order of utils (currently (1) inside, (2) outside). This nudged me towards the inside option being the smarter choice, but TBH I don't see when that would be true – unless you can be sure that your list will never get multiline.

The example could also add (or at least hint to add) a ml-5 to the outside-list.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tailwindlabs/tailwindcss-com/CcyzJSHzjwwcDBDXVxFk7nNi2Nqj
✅ Preview: https://tailwindcss-com-git-fork-tordans-patch-2-tailwindlabs.vercel.app

[reinink]

@tordans Hey thanks for this PR! I agree, understanding how each of the list-style-position options works can be tricky, and I think this change definitely helps show the difference between the two.

In the past I've been inclined to use inside, but have learned the hard way that outside is often the better option because of the way the line wrapping works. I'm not sure that we necessarily want to prescribe one or the other in our docs though. Better for us to just clearly illustrate how each works, which this PR helps to do.

Thanks again 🙌