Describe the bug
When the Tech Carbon Standard is updated to use version 0.4.0, the styling of the estimator is different and appears to be overridden by the TCS site styling.

To Reproduce
Steps to reproduce the behavior:

1. Clone the https://github.com/ScottLogic/Technology-Carbon-Standard repo
2. Update the devDependencies in its package.json to use "@scottlogic/tech-carbon-estimator": "^0.4.0"
3. Run npm install and bundle install
4. Run the site locally with bundle exec jekyll serve
5. Navigate to http://localhost:4000/estimator and view the estimator within the TCS site

Expected behavior
Estimator portion of the site appears as when testing the estimator locally. The styling of the rest of the TCS site should not be affected by including the estimator component.

Screenshots

Live view of TCS with sized headers and active tab bottom border

TCS using updated package with header sizing and active tab affected

Inspection showing bottom border being overridden

Inspection showing main.css taking precedence

Additional context
Some thoughts on possible issues/solutions here:

• TCS site is using older version of Tailwind, and therefore does not put everything into layers by default
• CSS rules without a layer take priority over those with, no matter the ordering of their inclusion
• Use of Shadow DOM for the estimator component seems like the proper solution here but there may be issues with getting this working with Tailwind via Angular.