Admin css error - tailwind css

[tomphilpotts]

Hi

I am having a strange issue with yarn. We have pushed to our staging area and ran yarn:build but the gutenberg editor is not looking correct. It is like it is missing some css styles.

When I run

yarn:build or yarn:production

I get this below

You can see in the first image that the toolbar styling is off, plus the font is being pulled in from the front end.

If I run

yarn:start

on the live terminal I get the following back to normal.

I’ve created a repo here: https://github.com/tomphilpotts/bsb-sage-theme

edit: this is a tailwind compiling error.

[tomphilpotts]

Update:

Installed a fresh install with compose composer create-project roots/sage test-theme

Yarn build seems to be working fine. Will keep investigating…

[tomphilpotts]

Error has een found:

For some reason extra css is being injected into the bottom of the page.

What seems to be happening is tailwind is being complied with the .editor-styles-wrapper.

example:

/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */

.editor-styles-wrapper blockquote,
.editor-styles-wrapper dl,
.editor-styles-wrapper dd,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,
.editor-styles-wrapper hr,
.editor-styles-wrapper figure,
.editor-styles-wrapper p,
.editor-styles-wrapper pre {
    margin: 0;
}

.editor-styles-wrapper button {
    background-color: transparent;
    background-image: none;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

.editor-styles-wrapper button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

.editor-styles-wrapper fieldset {
    margin: 0;
    padding: 0;
}

.editor-styles-wrapper ol,
.editor-styles-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

[tomphilpotts]

Through a lot of trial and error, I have found that add_theme_support('editor-styles'); is causing the issue.

Once disabled, all the Gutenberg styles return to normal. This is only happening on the our live staging server, locally we are using Vagrant and it is normal.

Any thoughts as to why this maybe happening?

[Julien_Thomas]

Hi !
yes this it how it works with the new editor vs the iframe used by the old one.

The solution I finally use is to make 2 stylesheets :

• One for the frontend
• One for Gutenberg editor only

add_theme_support( 'editor-styles' );
add_editor_style(asset_path('styles/editor.css'));

For the Gutenberg’s one, I remove “@tailwind base” that causes the conflict with the editor, because of how it’s enqueuing the css.

Then, adding some specific CSS to the editor in the Gutenberg stylesheet.