Migrate away from _utilities.legacy.scss

[lb-]

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 Review and replace usage of float layouts in admin UI for RTL support #8126

[lb-]

@thibaudcolas any thoughts on this?

[lb-]

Created after reviewing #8855 - new code added using .u-hidden class.

[thibaudcolas]

All of this makes sense to me. Note u-hidden uses !important, so the logical Tailwind replacement would be !w-hidden.

[Lovelyfin00]

Hi @thibaudcolas
Is this issue still open?

[lb-]

Go for it @Lovelyfin00 - this is still open. Try to address a few small ones in one PR before you tackle them all.

A good place to start is just the removal of unused ones. Be sure you check the code yourself, and also search for partial matches in the code.

[Lovelyfin00]

Hi @lb-
After I remove the classes that needs to be removed from the utitlities.scss file, where do I have to go in the codebase to find out where those classes are being used?

[lb-]

@Lovelyfin00 best to search the code for any usage.

Tailwind classes get generated based on the tailwind config file https://github.com/wagtail/wagtail/blob/main/client/tailwind.config.js

[Lovelyfin00]

I can't find where these html are displayed on the wagtail bakery. I have searched edit post on the baskery admin but I still can't find what I'm looking for.

/wagtail/wagtail/documents/templates/wagtaildocs/documents/edit.html

/wagtail/wagtail/snippets/templates/wagtailsnippets/snippets/edit.html

[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

[Lovelyfin00]

Thank you so much @lb-
Last one for tonight I promise 😅😅

/wagtail/wagtail/contrib/forms/templates/wagtailforms/list_submissions.html

[lb-]

@Lovelyfin00 in the menu click forms - then click the contact form responses listing.

[lb-]

File: client/src/tokens/typography.jsAdd (maybe after lineHeight)

const listStyleType = {
  none: 'none',
};

Then ensure you export it at the bottom

module.exports = {
  systemUIFontStack,
  monoFontStack,
  fontFamily,
  fontSize,
  fontWeight,
  letterSpacing,
  lineHeight,
  listStyleType,
  typeScale,
};

Then import that listStyleType in client/tailwind.config.js

const {
  fontFamily,
  fontSize,
  fontWeight,
  letterSpacing,
  lineHeight,
  listStyleType,
  typeScale,
} = require('./src/tokens/typography');

Then include it in the module export

    fontWeight,
    lineHeight,
    listStyleType,
    letterSpacing,
    borderRadius,

Based on https://tailwindcss.com/docs/list-style-type

[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 #9535

[thibaudcolas]

As of #11365, all that’s listed here has been changed except show-transparency and nice-padding. I’m not entirely sure what to do with those two so will hold off creating a further issue. show-transparency could probably stay as-is, and for nice-padding I have a feeling it could become a "component".