Replacing Wagtail Templates/Layouts Stylings

[fessehaye]

Inspecting wagtail templates and replacing respected CSS classes used in it

Dev Tasks

• [ ] remove bootstrap exclusive classes
• [ ] remove custom css classes and replace with tailwind utlity classes
• [ ] removed related sass files
• [ ] keep class names if they are required to js files

Criteria

• [ ] template is functioning and testing without visual stylistic changes

Tips for converting existing styles to tailwind

Converting spacing units

Use this table when converting margin/padding/widths

Tailwind Unit	Bootstrap Unit	Size (rem)
1	1	0.25rem
2	2	0.50rem
3		0.75rem
4	3	1rem
5	4	1.5rem
6		2rem
7	5	3rem

Converting column classes

When you replace a class like col-sm-4, use tailwind breakpoints to replace the middle section then use tw-w-[col]/12 to replace the width and then add tw-px-4 tw-relative to replace the padding/position

Removing SASS files

If the component you are working on does not have a wagtail template, it might be best to create a tailwind component using the plugin API in CSS-in-JS

https://tailwindcss.com/docs/adding-custom-styles#writing-plugins

You can also use tailwind.component.js for further examples on the how we did it on the repo

Wagtail block issue

You need to make sure there is a space between any tailwind classes and wagtail blocks

This would not parse properly: tw-w-[120px]{% endif %}

Reverse engineering bootstrap classes and elements

Due to the amount of mixins and sass functions with bootstrap usage, I would not always recommend try to step through the sass files and it would easier to step over if you just inspected the elements with dev-tools

┆Issue is synchronized with this Jira Story

[cdanfon]

After chatting with @fessehaye during Grooming this ticket should become an epic.

[simont-cr]

Closing this issue as it is a duplicate of #6989 issue that is already included in our 2024 plan.