chakra-ui overwrites TailwindCSS utilities/classes

TL;DR: You need to use the correct layer order (explanation below), like this:

@layer reset, tokens, theme, base, recipes, components, utilities;

Chakra UI with TailwindCSS. Sure?

The first and most important thing I'd point out is that Chakra UI wasn't designed to be used with Tailwind CSS, so using them together is somewhat discouraged.

• Comparison - Chakra UI Docs

Instead, you might want to try a fully TailwindCSS-based system like ShadCN or DaisyUI.

@layer

I assume you're using TailwindCSS v4. TailwindCSS v4 handles layers properly by default. It's important to understand that CSS layers have a priority order, but so-called 'unlayered' styles (those not assigned to any layer) will always take precedence over any layered styles. You can read more about that here:

• @layer priority
• How to prevent TailwindCSS styles from overriding host-page styles and vice versa?
• What is the purpose of the Tailwind @layer directive?

So, TailwindCSS implicitly declares the following in the background through @import 'tailwindcss';:

@layer theme, base, components, utilities;

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

• When you import tailwindcss; what injected automatically - TailwindCSS v4 Docs
• Preflight from TailwindCSS v4 - StackOverflow

And Chakra UI does it like this:

@layer reset, base, tokens, recipes;

• Layer Order - Chakra UI Docs

Solution #1 - CSS Specificity by properly layer ordering (recommended)

• CSS Specificity - MDN Docs
• Why is the first class more important than the latter? - StackOverflow

So it's clear that Chakra UI's reset layer has the highest priority, followed by everything else. Since TailwindCSS also includes a CSS reset called Preflight, this isn't entirely necessary. But we're essentially trying to merge two tools that were designed independently of each other.

Let's reduce the strength of the reset layer (solution instead of @import "tailwindcss";):

style.css

@layer reset, tokens, theme, base, recipes, components, utilities;

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

Disable preflight in ChakraUI

Extra: It may be worth disabling ChakraUI's preflight system, since TailwindCSS has its own, as ok_i suggested.

style.css

@layer tokens, theme, base, recipes, components, utilities;

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

theme.ts

export const system = createSystem(defaultConfig, {
  preflight: false, // Can disable ChakraUI's preflight
})

Disable preflight in TailwindCSS

Alternatively, you can disable TailwindCSS's preflight if you prefer to use ChakraUI's instead.

style.css

@layer reset, tokens, theme, base, recipes, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
/* @import "tailwindcss/preflight.css" layer(base); */ /* Can disable TailwindCSS's preflight */
@import "tailwindcss/utilities.css" layer(utilities);

theme.ts

export const system = createSystem(defaultConfig, {
  preflight: true,
})

Solution #2 - Disable layers in both dependencies

Or disable layers in both systems (which I wouldn't recommend):

style.css

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

• Preflight - TailwindCSS v4 Docs

theme.ts

export const system = createSystem(defaultConfig, {
  disableLayers: true,
})

• Disabling Layers

Try with the below code

import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { ChakraProvider } from '@chakra-ui/react';
import App from './App';

const chakraCache = createCache({
  key: 'chakra',
  prepend: true, // ensure Chakra styles are loaded before others
});

export default function Root() {
  return (
    <CacheProvider value={chakraCache}>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </CacheProvider>
  );
}

Disable Chakra’s Global Styles

<ChakraProvider resetCSS={false} theme={defaultSystem}>
  <div className="mx-2 p-4 text-4xl">This is your text.</div>
</ChakraProvider>

This way, Chakra doesn’t interfere with Tailwind classes on native HTML elements.

Wrap Only Chakra Components in Provider

If your Tailwind app is the core and Chakra is used for a few components:

<div className="mx-2 p-4 text-4xl">This is your text.</div>

<ChakraProvider theme={defaultSystem}>
  <SomeChakraComponent />
</ChakraProvider>