Remove WordPress Gutenberg button default styles

Trying to build a site with WordPress + Gutenberg and Tailwind.

It’s including a bunch of crappy inline styles in the for every single button and I don’t want to have to constantly fight to overwrite these with !important or a specificity battle.

Example…

<style id='global-styles-inline-css' type='text/css'>
...
...

a:where(:not(.wp-element-button)) {
    text-decoration: underline;
}

.wp-element-button, .wp-block-button__link {
                background-color: #32373c;
                border-width: 0;
                color: #fff;
                font-family: inherit;
                font-size: inherit;
                line-height: inherit;
                padding: calc(0.667em + 2px) calc(1.333em + 2px);
                text-decoration: none;
}

How do you stop WordPress from injecting this junk into your theme?

>Solution :

To avoid dealing with inline styles and specificity battles, you can deregister or dequeue the default WordPress Gutenberg styles, and then use your own Tailwind CSS classes for styling the buttons.

Here’s how you can dequeue the default Gutenberg styles:

Add the following code to your theme’s functions.php file:

function remove_gutenberg_styles() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
}

add_action('wp_enqueue_scripts', 'remove_gutenberg_styles', 100);

This code will remove the default Gutenberg styles, so they won’t interfere with your Tailwind CSS classes.

Then, after you’ve removed the default styles, you can create your own button styles using Tailwind CSS classes. Add these styles to your stylesheet or inside a <style> tag in your theme.

/* Custom button styles using Tailwind CSS */
.custom-button {
    @apply bg-gray-800;
    @apply border-none;
    @apply text-white;
    @apply font-inherit;
    @apply text-base;
    @apply leading-inherit;
    @apply py-2 px-4;
    @apply no-underline;
}

.custom-button:hover {
    @apply bg-gray-700;
}

Finally, when you add a button to your site using the WordPress Gutenberg editor, apply the custom class custom-button to the button. This will style the button according to your Tailwind CSS classes, and you won’t have to deal with inline styles or specificity battles.