[Sage 10 &9?] Tailwind in editor.scss. Editor blocks not effected?

[Tim]

Hey all,

I’ve got a question about the editor.scss in the gutenberg editor. I would like to use some of the tailwind features in the editor from tailwindcss/utilities. For this I’ve added the following to the scss:

.block-editor-block-list__layout {
  @import '~tailwindcss/base';
  @import '~tailwindcss/components';
  @import '~tailwindcss/utilities';
}

But this doesn’t seem to work. When I place it outside the .block-editor-block-list__layout selector it does work. But then the entire backend is affected. And I just want the editor.

Question:
How would I add Tailwind to the block editor?

I would expect a result like:

.block-editor-block-list__layout{
    .w-6/12{
        ...
    }
}

Thoughts

• Is this because with this code I place html,body selectors inside a child selector? (.block-editor-block-list__layout body{}
• I saw the setup.php uses wp_enqueue_style() and not add_editor_style() And I using the editor.scss for the right goal?

Side note
importing ~tailwindcss/utilities boosts the rendered css with an extra 3.7mb. This is rather big, not? (both in app.scss as editor.scss)