feat: add hyphens

[fratzinger]

In german language we have many long words. We concat cohesive words without whitespaces. It's pretty easy to have words with 15+ characters. The german language also has strict rules how to hyphenate based on syllables, so the https://tailwindcss.com/docs/word-break does not help at all for normal language.

So the hyphens rule comes in pretty handy: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

It's pretty straight forward addition, that's requested by a few people:

• Add hyphens utility #7286
• hyphens css property in tailwindcss #2243
• add Hyphens into word Break #8508
• [Feature Request]: Utilities for the "hyphens" CSS property #1846
• Control how line breaks and hyphens are used #3985

[Danielduel]

LGTM 👍

https://caniuse.com/?search=hyphens
The core support looks like it's done, but per-nonenglish-language support is only on Firefox.

[adamwathan]

Thanks! The much bigger project here is the documentation. If anyone wants to put together a PR for that against our v3.3 branch in the docs repo that will make it faster to merge this. Challenge is always coming up with nice visual examples that teach the feature well.

[fratzinger]

Thanks for the quick reaction.

I've started but am not able to get the right version of the dependency to work on the docs properly. What's the insiders version of tailwindcss of this branch? How do I get this up and running so it can be reviewed? Unfortunately, I haven't found a contribution guide which describes the workflow. Guidance is highly appreciated, so I'm able to make a PR against the v3.3 branch in the docs repo. 👍

[adamwathan]

Just gonna merge this for now, I'll get the docs ready before the real v3.3 release some time in March. Thanks!