Roots Discourse

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

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)

This topic was automatically closed after 42 days. New replies are no longer allowed.