How to see Tailwind CSS rendered in block editor?

[ghost]

For anyone wondering how to have the block editor display the Tailwind CSS you have used in your block template, see below!

All you need to do is edit the enqueue_block_editor_assets action (found in app/setup.php). Add a call to wp_enqueue_style with app/setup.php as the parameter.

See the last line of the action below for the correct implementation.

/**
 * Register the theme assets with the block editor.
 *
 * @return void
 */
add_action('enqueue_block_editor_assets', function () {
    if ($manifest = asset('scripts/manifest.asset.php')->load()) {
        wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ...array_values($manifest));
        wp_enqueue_script('sage/editor.js', asset('scripts/editor.js')->uri(), ['sage/vendor.js'], null, true);

        wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
    }

    wp_enqueue_style('sage/editor.css', asset('styles/editor.css')->uri(), false, null);

    /* Enqueue style to see Tailwind CSS styles applied in the block editor */
    wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);

}, 100);