Working with Gutenberg and Oxygen can sometimes be challenging as they are quite opinionated within the editor. In particular, Gutenberg wraps everything with .block-editor-block-list__layout.is-root-container > …, which has a higher priority. To achieve a correct visual representation, you will often need to use !important.

But since you’re working within the editor, and we can detect whether you’re in the editor or not, it’s tedious to handle this manually. That’s why we implemented a logic that automatically adds !important, but only inside the editors. On the front end, you should have full control over what is important for you.

The second issue is that Tailwind also comes with an opinionated Preflight.

You can read more about it here: Tailwind Preflight if you haven’t worked with Tailwind before.

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);

/* HERE */
@import "tailwindcss/preflight.css" layer(base);
/* HERE */

@import "tailwindcss/utilities.css" layer(utilities);

Solution

We have changed TailwidnCSS 4 default:

FROM

@import "tailwindcss";

TO

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities);

You can still use @import “tailwindcss”;, and you can always take a second approach since we are leveraging Tailwind’s native way of handling things.

To clarify, usign @layer theme, base, components, utilities; and import those 3 lines
is exactly the same import as @import “tailwindcss”; but this way you can easily just coment or delete preflight

Solution for v3

We have the same solution in TailwindCSS 3.x.x, but it is managed inside the config file.

export default {
    theme: {
        extend: {
            colors: {
                clifford: '#da373d',
            }
        }
    },
    corePlugins: {
        // PREFLIGHT IS HERE
        preflight: false, 
        // PREFLIGHT IS HERE
    }
};