Forbid deprecated break-word in CSS

[silverwind]

Forbid deprecated break-word and fix all occurences.

Regarding overflow-wrap: break-word vs overflow-wrap: anywhere:

Example of difference: https://jsfiddle.net/silverwind/1va6972r/

Here it says:

The differences between normal, break-word and anywhere are only clear if you are using width: min-content on the element containing the text, and you also set a max-width. A pretty rare scenario.

I don't think this difference will make any practical impact as we are not hitting this rare scenario.

[silverwind]

Also see tailwindlabs/tailwindcss#12127 and specifically https://play.tailwindcss.com/o2CjmfmOzJ which makes a point for anywhere over break-word (the latter would need a min-w-0 to work), so I think it's better to go with anywhere.

[wxiaoguang]

MDN shows the difference

[silverwind]

MDN shows the difference

Yeah but they set these, which imho make it a unrealistic example:

width: min-content;
max-width: 11em;

I think https://play.tailwindcss.com/o2CjmfmOzJ is more realistic, only that we don't set display: grid, but I assume display: flex would behave similarily.

[silverwind]

Here is that example with flex, shows exact same wrapping as grid:

https://play.tailwindcss.com/gLZXWneeLy