Roots Discourse

Styling with Tailwind in admin area

How could one apply allready installed and working (in Frontend) tailwindcss to the admin area?
Actually i want to style custom gutenberg blocks created with ACF.
Was trying to enqueue styles with enqueue_style in acf_register_block_type without success:

// Custom Block Type
add_action('acf/init', 'fundament_acf_init_block_types');
function fundament_acf_init_block_types() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'entry-block',
            'title'             => __('Entry Block'),
            'description'       => __('Block element for creating full width page entry.'),
            'render_template'   => get_template_directory().'/views/blocks/entry-block.php',
            'enqueue_style'     => get_template_directory_uri().'/assets/styles/blocks/main.scss',
            'category'          => 'formatting',
            'icon'              => 'admin-site-alt',
            'keywords'          => array( 'entry', 'index', 'start', 'home' ),
        ));
    }
}

I imported tailwind into my edtior.scss file so at the top of my resources/styles/editor.scss looks like:

@import 'config/fonts';

@import 'config/variables';

@tailwind base;

@tailwind components;

@tailwind utilities;
3 Likes

Thank you!
How do you get editor.scss working properly?
Did you enqueue it somewhere?
How does WP know it has to load this css only in admin?

I found a serious post about how to implement css files for gutenberg editor: Post by @Simeon

So i edited config.json adding this:

"gutenberg": ["./styles/gutenberg.scss"],

and in my setup.php adding this:

add_action('enqueue_block_editor_assets', function () {
     wp_enqueue_style('sage/gutenberg.css', asset_path('styles/gutenberg.css'), false, null);
});

But somehow I have not yet got it working. If i look into the console while iā€™m editing a gutenberg block, i get an 404 error for this gutenberg.css: MIME-Type conflict

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