Unable to modify font-size of h1, h2, etc. from parent component

[yowzadave]

The preflight style rule of

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

is overriding any style rules that I put in a (non-scoped) parent component—the effect is that I'm unable to affect the font size or weight of a header tag with a style rule in any component except for the component itself where the tag itself occurs.

Looking at the output source, I wonder if this is happening because the tailwind preflight rules are imported after everything except the rules for the component itself?

[forsartis]

Yeah, tailwind.css is loaded after all style tags inside components and therefor overriding non-scoped styles.

To avoid this issue you could define your base styles inside assets/tailwind.css below @tailwind base; see docs https://tailwindcss.com/docs/adding-base-styles#using-css.
Or you could delete the import './assets/tailwind.css' line from main.js and inject Tailwinds base, components and utilities styles inside your parent component.

<style>
@tailwind base;

h1 {
  font-size: 14px;
}

@tailwind components;

@tailwind utilities;

</style>