Is there a way to make mantine-datatable work together with Tailwind?

[benze]

I've been struggling to get mantine-datatable to work together properly with Tailwind. Following other suggestions, I have Mantine and Tailwind working with the following configuration in separate layers:

global.css:

/* 👇 Expressly import the mantine core styles into mantine-core layer */
@import '@mantine/core/styles.css' layer(mantine-core);

@layer  tailwind-base, mantine-core, tailwind-components,  tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}
@layer tailwind-components {
  @tailwind components;
}
@layer tailwind-utilities {
  @tailwind utilities;
}

And

postcss.config.cjs:

module.exports = {
    plugins: {
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
        'postcss-import': {},
        'postcss-preset-mantine': {},
        'postcss-simple-vars': {
            variables: {
                'mantine-breakpoint-xs': '36em',
                'mantine-breakpoint-sm': '48em',
                'mantine-breakpoint-md': '62em',
                'mantine-breakpoint-lg': '75em',
                'mantine-breakpoint-xl': '88em',
            },
        },
    },
};

However, when I add mantine-datatable css to the mix, the table headers scroll out of the table or are simply out of the table altogether:

global.css:
...

/* 👇 Expressly import the mantine-datatable styles into mantine-datatable layer */
@import 'mantine-datatable/dist/styles.css' layer(mantine-datatable);

@layer  tailwind-base, mantine-core, tailwind-components,  tailwind-utilities, matine-datatable;
...
...
...

I did notice that if I eliminate the tailwind-utilities layer altogether, then it is rendered as expected:

/*@layer tailwind-utilities {*/
/*  @tailwind utilities;*/
/*}*/

Moving the layer to the first or the last of the list makes no difference.

Does anyone have TW and mantine-datatable working together?

[benze]

Problem solved. I had an errant CSS style that had slipped into the table definition. I compared a functional version with a non-functional version, and it pointed me to the errant CSS style.

Consequently, a functional solution for me is:

/* 👇 Expressly import the mantine core styles into mantine-core layer */
@import '@mantine/core/styles.css' layer(mantine-core);

/* 👇 Expressly import the mantine-datatable styles into mantine-datatable layer */
@import 'mantine-datatable/dist/styles.css' layer(mantine-datatable);

@layer  tailwind-base, mantine-core, tailwind-components, tailwind-utilities, mantine-datatable;

@layer tailwind-base {
  @tailwind base;
}
@layer tailwind-components {
  @tailwind components;
}

@layer tailwind-utilities {
  @tailwind utilities;
}