Sage FSE - Styling getting overwritten by Tailwind default styling

sage
1

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!

2

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.

3

I just came across the same problem in the “non FSE” Sage theme when setting element styles within bud.config.js.

Once thats written to theme.json the CSS specificity problems arise, since the tailwind styles, from their own CSS reset in that case, appear later in the cascade.

I used the same workaround as @jarirengeling for now, but would be interested if anybody has another solution to that problem. In the Tailwind Docs they also mention to just override the reset, so I guess thats probably the best way to do it.

4

So I had a similar issue (I do not use tailwind), with normalize styles. Those styles overrode the Gutenberg global styles. A solution was separating out those styles and moving them (in source/CSS order) above the Gutenberg global styles. This was achieved by using WordPress hooks and manipulating the enqueued styles order.

Related discussion with example and rationale:

1 Like