Migrate away from _utilities.legacy.scss

Is your proposal related to a problem?

• For contributors it is currently not clear what utilities classes should be used as some code uses the Tailwind classes and some uses the legacy utility classes.
• It would be good to remove the client/scss/overrides/_utilities.legacy.scss file and replace those usages with the appropriate Tailwind classes OR remove their usage completely (e.g. .clear).
• Note: There is confusion also about when to use Tailwind classes for a whole component vs just a sub-set of adjustments, but that can be covered elsewhere.

Describe the solution you’d like

Remove the utilities legacy file and replace each usage if needed with either SCSS mixins OR the equivalent tailwind utility class.

class	Note
.u-hidden	Replace with w-hidden - but validate each usage
.clearfix	Remove, replace with mixin clearfix() if used anywhere else, will be removed completely in the near future
.nice-padding	Convert to a Tailwind utility
.divider-before	Remove, not used
.divider-after	Review, may not be needed and does not add anything useful
body.reordering	Should probably be in layouts
.show-transparency	Convert to Tailwind utility
.inline	Replace usage with w-inline (validate each usage)
.inline-block	Replace usage with w-inline-block (validate each usage)
.block	Replace usage with w-block (validate each usage)
.unlist	Remove, only current usage is in Styleguide and this example could either removed or replaced with Tailwind classes
.overflow	Replace usage with appropriate w-overflow-... Tailwind class (validate each usage) OR remove if not used

Describe alternatives you’ve considered

• Leave as is, each contributor can just keep using these for now.

Additional context

• We really need to provide a clearer guide somehow as to what Tailwind classes are available and the general approach that is recommended for contributions.
• There is separate work happening for removing floats https://github.com/wagtail/wagtail/issues/8126

[lb-]

https://docs.wagtail.org/en/stable/editor_manual/documents_images_snippets/documents.html https://docs.wagtail.org/en/stable/editor_manual/documents_images_snippets/snippets.html

[lb-]

@Lovelyfin00 just a heads up divider-before is not used but divider-after is used in multiple places and serves a purpose.

See the line between the ‘filesize/usage’ column.

We possibly could migrate that to Tailwind utility classes but just flagging based on feedback on https://github.com/wagtail/wagtail/pull/9535