# Sage11 + Gutenberg, default styles conflicts in the block editor

**URL:** https://discourse.roots.io/t/sage11-gutenberg-default-styles-conflicts-in-the-block-editor/29375
**Category:** sage
**Tags:** sage11
**Created:** 2025-03-06T05:14:08Z
**Posts:** 6

## Post 1 by @ADP — 2025-03-06T05:14:08Z

Hello all,

Looking for some insight. I’ve built a few sites in the past with Sage 10, Tailwind & ACF Blocks. With Sage 10, the Gutenberg editor was pretty much a blank slate with all default styles basically removed from wrappers and elements (margins, padding, etc). I was able to import my app.css into editor.css and have the block editor look nearly identical to the front end.

With Sage 11, although Tailwind classes and styling are being applied in the block editor - I seem to be getting some conflicts due to default editor styles… unwanted margins on headings, padding on unordered lists, etc.

Some of these conflicts appear to be coming from ‘reset.css’ and inline styles such as ‘:where(.editor-styles-wrapper)…’

Anyways, I’m really just trying get my block editor styles to match the front end. Maybe I’m just missing something or doing something wrong. Has anyone else noticed this?

---

## Post 2 by @ben — 2025-03-06T12:09:06Z

> [@ADP](#):
>
> Some of these conflicts appear to be coming from ‘reset.css’

This sounds like you’re not using the iframed editor, which happens when you have any blocks that are using API version 2

> **[API Versions – Block Editor Handbook | Developer.WordPress.org](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)**
>
> This document lists the changes made between the different API versions.

---

## Post 3 by @ADP — 2025-03-06T15:11:14Z

Hi Ben, thanks for the info. That does seem to be the case. ACF mentions this work around… Though, I’ve been using acf-composer and not block.json

[ACF | ACF Blocks and WordPress Blocks v3](https://www.advancedcustomfields.com/blog/acf-blocks-and-wordpress-blocks-v3/?_gl=1*1uy7h31*_gcl_au*NjY2NTI5NzA2LjE3NDEyMjY1MzQ.*_ga*MjM2Mjg1Njk3LjE3MzI2NDQ3MDY.*_ga_QQ5FN8NX8W*MTc0MTI2ODIyMy4yNC4xLjE3NDEyNjg0ODQuNjAuMC4xODAyMzQ3ODY3*_ga_1PB42138XB*MTc0MTI2ODQ4My4xNC4wLjE3NDEyNjg0ODMuMC4wLjA).

---

## Post 4 by @jeremylind — 2025-03-11T19:01:50Z

But what if I cannot use the iframed editor? Plugins used on the site may add v2 blocks which revert the editor. In that case, editor styles generated by Gutenberg take precedence over theme styles included in `editor.css` that are wrapped in `@layer` directives. Example:

Added by Gutenberg:

```
:where(.editor-styles-wrapper) h1 {
   font-family: revert;
}
```

overrules what is added by `add_editor_style()`:

```
@layer base {
    :where(.editor-styles-wrapper) h1 {
       font-family: sans-serif;
    }
}
```

The use of css layers seems to mean that the non-iframed editor is not supported.

---

## Post 5 by @Log1x — 2025-03-11T22:12:49Z

> Though, I’ve been using acf-composer and not block.json

ACF Composer can support v3 but I need to push an update to allow it to be set globally. Also, make sure you’re using `acorn acf:cache` and caching your blocks to `block.json`, it’s much faster in the editor.

> The use of css layers seems to mean that the non-iframed editor is not supported.

Tailwind v4 makes heavy use of cascade layers with no way to really disable it. one thing you could try is importing/configuring Tailwind in your `app.css` file:

```
@import 'tailwindcss';

@theme static {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
```

and then in your `editor.css` (assuming it is only loaded in the editor), force all the selectors to be important with Tailwind’s new import stuff:

```
@import './app.css' important;
```

you’d still probably face some specificity issues and need to make use of Tailwind’s important modifier on certain styles like `text-sm!` but it might ease the pain a little bit. :grimacing:

---

## Post 6 by @ADP — 2025-03-12T14:16:18Z

@Log1x thanks for the explanation. That explains why even though I wasn’t forcing Block API v3 when working in Sage 10/Tailwind v3, I still wasn’t getting nearly as many conflicts as with Sage 11/Tailwind v4.

Anways, forcing v3 on all of my ACF blocks as well as removing some plugins (that added v2 blocks) solved the issue for me.