Blocks with Sage 10 and Tailwind - styling not showing on Gutenberg editor

[fabianwurk]

I'm trying to create Blocks - and use Tailwindcss for styling. The block appears with correct styling on frontend but not showing any preview styling on editor itself. Do I have to register the Tailwind styles for the editor preview?

I'm just using the default test block eg:

{{--
  Title: Testimonial
  Description: Customer testimonial
  Category: formatting
  Icon: admin-comments
  Keywords: testimonial quote
  Mode: edit
  Align: left
  PostTypes: page post
  SupportsAlign: left right
  SupportsMode: false
  SupportsMultiple: false
  EnqueueStyle: styles/style.css
  EnqueueScript: scripts/script.js
  EnqueueAssets: path/to/asset
--}}

<blockquote data-{{ $block['id'] }} class="bg-red-200 p-4">
    <p class="text-red-700">{{ get_field('testimonial') }}</p>
</blockquote>

<style type="text/css">
  [data-{{$block['id']}}] {
  }
</style>

[MWDelaney]

Make sure you're enqueuing your styles on the back-end. Sage doesn't automatically include all your front-end styling in the editor.

[Striffly]

I found a trick to include the front style in Gutenberg :

1. Copy the style from your app.css file to the editor.css file (with a simple configuration, an @import should be enough). In my case I use tailwind, I copy/paste the whole file with all imports.
2. Add the postcss-prefixwrap plugin. Use either postcss.config.js (tested) or bud.config.js (not tested). Set .editor-styles-wrapper as prefix.
3. Make sure that the plugin is only executed on the editor.css file : from postcss.config.js, just check if the name of the processed file contains editor.css.
   Ex:

module.exports = (api) => {
  return {
    ident: 'postcss',
    plugins: getPlugins(api.file.includes('/editor.css')),
  };
};

4. Disable the editor's styles

add_action('after_setup_theme', function () {
  remove_editor_styles();
}, 999);

And it's done !