Refactor SASS usage for the rest of the Codebase

[fessehaye]

Removed SASS files and removing sass build from project. Start only relying on the POSTCSS build for styling purposes.

Should probably be done after a few of the Design System tasks are completed related to the atomic design setup as well as updates to the style-guide page

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

[mtdenton]

@fessehaye please update the spacing chart at the top. Thanks!

[simont-cr]

This ticket is made to help move forward our goal of moving away from bootstrap https://github.com/MozillaFoundation/foundation.mozilla.org/issues/6989 epic.