Customized and extended tailwind styles

[bzzz-coding]

Fixes #429

Changes

• Added:
  • customized colors found in _colors.scss
  • customized screens found in _breakpoints.scss for responsive designs
  • customized font family
• Extended:
  • line height
  • border radius (for buttons)
• Demonstrated on /demo-tailwind page:
  • buttons

Problem--needs discussion:
Currently, we imported
import "tailwindcss/tailwind.css"; import "./index.scss"; in such order so that tailwind styles don't override existing components styled with Sass. However, some Sass classes share the same names (e.g. p for padding) but have different values. For example, p-1 in our Sass is padding: 8px; but in tailwind p-1 is padding: 0.25rem; /* 4px */ and because of this, new components relying on TW classes can't use p1-p6 to get TW styles. I think we would either need to do some conversion or override Sass styles in another way, but maybe there's a better way of handling these conflicts?

[MattPereira]

maybe there's a better way of handling these conflicts?

1. Not a huge fan of this but it is an option:

2. Somehow using the include property in the module.rules for webpack.config.js so that the "sass-loader" only gets applied to specific files? ( might be gnarly trying to specify all the files tho )

See screenshot

https://stackoverflow.com/questions/34623229/webpack-loaders-and-include

3. Speedrun conversion of all sass to tailwind 😓

[MattPereira]

Appreciate your work on configuring the global theme to make the styles more maintainable!

Also love the comments in the colors section to help organize

I wasn't sure if you wanted to make fixing the padding specificity part of the scope for this PR or create a new issue for it but I'm good with either