@ahmaxed Not sure if it's your birthday, but this one is a surprise for you 😉

I'm tagging you for a review and inputs, but I can handle the implementation. I know it's a big wall of text, so please take your time, I'm not blocked by this issue.

It does not have to be my birthday. I always celebrate when I see well-thought out issues like this.
A few thoughts:

1. At the time, I came to a conclusion that normalize is the industry standard comparing to preflight and it would make removing bootstrap easier since bootstrap was using it. If any of these assumptions are incorrect, we should move forward with preflight.

2. There should be one set of presets, for the component library regardless of what is being overwritten in learn, etc.

3. I think the main reason we added normalize and global element styles is that when the elements were imported to learn they would look different from Storybook. Might need to remove them, and see how they effect storybook and learn.

Finally, this is a great blueprint for the stylesheet consolidation. At the same time, it might be helpful to evaluate how it would impact the migration. If we decide to do this before or after the migration, I am on board either way. It is a task that we need to take care of at some point.

Thank you for going through my wall of text 😄

At the time, I came to a conclusion that normalize is the industry standard comparing to preflight and it would make removing bootstrap easier since bootstrap was using it.

I had the same impression until I had to dig deeper and compare normalize with Tailwind preflight.

From what I gathered:

• Tailwind preflight uses modern-normalize and adds a couple more rules
• modern-normalize is built on top of normalize, but with some improvements
• The latest version of normalize is 8, and it's been 6 years since the last update

There should be one set of presets, for the component library regardless of what is being overwritten in learn, etc.

Just to clarify, by "presets", do you mean custom CSS rules and the rules would override the base Tailwind styles?

I won't object that, if that's what you mean 🙂 I think there are a couple of rules that we need to set to the component library, for branding and accessibility. Off the top of my head:

• The focus outline style - I believe we have been manually adding this to each interactive component (button, input, link, etc.), but I think this rule should be global
• Link underline - this is a custom rule and not from the original normalize stylesheet

  • ui/src/normalize.css

    Lines 43 to 44 in 379560e

    	/* This is required in order to improve text readability in Arabic */
    	text-underline-position: under;

• Font family - we do have Lato set in the library, but not Hack-ZeroSlash

Anyway, we can discuss what global styles the library should have separately. For now, I only need to confirm if I understand the idea correctly.

So I'll go ahead and experiment the proposed approach.

The steps would roughly be:

• @freecodecamp/ui
  • Try enabling Tailwind preflight
  • Remove global-element-styles.css and normalize.css, and probably cherry-pick some custom CSS from those files to base.css if the components look weird on Storybook
  • Bundle and release the new base.css (I actually don't need the new changes to be released in order to test, I just need the file content so that I can add to /learn locally)
• /learn
  • Replace the Bootstrap stylesheet with the new base.css
  • Check and fix UI regression (we should pair this work with the CSS selectors/overrides cleanup in global.css, so that we don't have to manually testing things twice)

I meant normalizers by presets, and look forward to hear about your progress with the experimentation.

(Please ignore. I'm using this comment as my notepad.)

Rules to be removed from base.css

• Border width reset:

  • ui/src/base.css

    Lines 7 to 14 in 9698a82

    	*,
    	::before,
    	::after {
    	/* Override the browser default border width in order to style individual border sides
    	* Ref: https://stackoverflow.com/a/76961084
    	*/
    	border-width: 0;
    	}

  • This is covered by Tailwind preflight
• Webkit tab highlight color:

  • ui/src/base.css

    Lines 20 to 24 in 9698a82

    	/* Override Tailwind's default `-webkit-tap-highlight-color` rule. */
    	/* https://github.com/tailwindlabs/tailwindcss/discussions/2984 */
    	button {
    	-webkit-tap-highlight-color: transparent;
    	}

  • Tailwind preflight was updated and now has this rule covered: https://github.com/tailwindlabs/tailwindcss/blob/f1f419a9ecfcd00a2001ee96ab252739fca47564/src/css/preflight.css#L39

Rules to be added to base.css

• Link underline:

  • ui/src/normalize.css

    Lines 43 to 44 in 9698a82

    	/* This is required in order to improve text readability in Arabic */
    	text-underline-position: under;

• Focus outline:
  • https://github.com/freeCodeCamp/freeCodeCamp/blob/c17587f656b8b2b2079d22b2e07040e5ea960cae/client/src/components/layouts/global.css#L194-L197

Other notes

• We only need to define font-family in tailwind.config.js. Tailwind automatically specifies which element should have which font

  • ui/tailwind.config.js

    Lines 90 to 93 in 9698a82

    	fontFamily: {
    	sans: ["Lato", "sans-serif"],
    	mono: ["Hack-ZeroSlash", "monospace"],
    	},

  • html gets sans: https://github.com/tailwindlabs/tailwindcss/blob/f1f419a9ecfcd00a2001ee96ab252739fca47564/src/css/preflight.css#L36
  • code, kbd, samp, and pre get mono: https://github.com/tailwindlabs/tailwindcss/blob/f1f419a9ecfcd00a2001ee96ab252739fca47564/src/css/preflight.css#L115
• Heading elements should not have font size specified in base.css, as each component may have its heading in different size (Modal is an example).
  • For now, we should just set the font size on the component level.
  • In the future, we might want to have text components (Title, Subtitle, Caption, etc.), each has a fixed font size and accepts an as prop that allows changing the heading level.

    // Pseudo code
    <Caption as="h1" />

• The custom .sr-only styles can be removed as Tailwind already supports this class

  • ui/src/global-element-styles.css

    Line 107 in 9698a82

    .sr-only {

  • https://tailwindcss.com/docs/screen-readers#screen-reader-only-elements