Editor only css styles

[interactivebytes]

Hi, I was wondering what method I could use to only include some css for the style-editor.css and not for the style.css? Thanks

[gregsullivan]

Hi Rachel,

Sorry for the delay in responding! I was off last week, and I'm now getting caught up.

Could you please tell me a little more about what kind of editor-only styles you're looking to add? I've used more than one method to add them to my own projects, so it would be helpful to hear a bit more about your use case.

(This is something I'd like to document further. I've also been considering adding tooling specific to this issue, but the scope of that tooling has often felt like creating a sledgehammer for something that might not warrant one.)

[interactivebytes]

Hi Greg, thanks for getting back to me.

We are using ACF to create a series of blocks, basically if a post is not selected we give the user a message in the backend, say I want to only have a class .alert{} that is only output in the style-editor.css and not in the style.css, is there a way to only include certain css. I wasn't sure if there was a way in css like in js where you could tap into that variable 'editor' === process.env._TW_TARGET.

My only other thought which is probably not the best, but creating a tailwind-admin.css that then includes the tailwind.css and updated the package.json to run postcss against the tailwind-admin.css

I don't imagine we need much css that needs to be shown in the admin, but was hoping not to bloat it more than it needed to be.

I hope that makes sense.

Regards,
Rachel

[gregsullivan]

Thanks for these details! So in cases like these, I'll generally remove Tailwind from the equation altogether, as the amount of CSS is relatively limited, and I'm happy to write it by hand. I'll generally add a line like this to functions.php:

// Enqueue editor styles.
add_editor_style( 'style-editor.css' );
add_editor_style( 'style-editor-extra.css' ); // Add this line.

Then I'll create a style-editor-extra.css alongside the existing style-editor.css file, and I'll put CSS directly into the new file.