Sage FSE - Styling getting overwritten by Tailwind default styling

Hi all,

We are currently creating a website using the Sage theme and the FSE (GitHub - strarsis/sage10-fse: Sage 10 theme adjusted for Gutenberg Full Site Editing (FSE)).

Now we have following problem, we have set our heading styles in the FSE, they are loading correctly but the Tailwind default styling overwrites the FSE styling.

This is our app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@media (wp-editor) {
  /* Style is ONLY in editor CSS */

  .your-styles-here {
    color: blue;
  }
}

This is what we see in the inspector:

app.css:81

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

h1 {
    font-family: var(--wp--preset--font-family--open-sans);
    font-size: var(--wp--preset--font-size--four-xl);
    font-style: normal;
    font-weight: 900;
}

So the Tailwind styling is above the FSE styling. And because that happens the font-size and font-weight is not working from the FSE.

Any idea how we can fix this except removing the default Tailwind styling in app.css?

Thank you very much!

So in your example, element selectors are used by the theme that have less specificity than CSS class selectors (assuming that tailwind classes are used). When you inspect the DOM elements that are not styled by the theme CSS, you should see how those CSS properties are formatted strikethrough, as they are overriden by the tailwind ones.