[v4] Style hierarchy is not properly applied when used with Mantine

[siddthesciencekid]

Hey All

I'm currently working on a project that uses Mantine for the component library and Tailwind CSS for styling. In v3 I had no problem writing Tailwind styles and applying them to Mantine components but in v4, it looks like for some reason all of the mantine default styles are taking precedence over the Tailwind styles.

I'm not sure what to do to fix this. In my Next.JS application I already import global.css (containing the tailwind directive and custom theme overrides) last. Does anyone have any insight into this problem

Here is my postcss.config file

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
    "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",
      },
    },
  },
};

export default config;

And in root layout.tsx this is the import order for the css styles

import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import "./globals.css";
// Rest of the layout page below

Note the mantine style taking precedence over tailwind style from global.css

[wongjn]

This is caused by the fact that Tailwind utility classes are now in cascade layers, which have lower precedence than rules not in any layer. You can remove them from the cascade layer like so:

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

[siddthesciencekid]

One more problem, everything looks good except the font-size styles which aren't getting correctly applied.

[siddthesciencekid]

[siddthesciencekid]

The computed font-size is only 16px even though the one configured in tailwind is 32px

[wongjn]

Consider providing an example that reproduces the unexpected behavior please.

[siddthesciencekid]

@wongjn Figured out the issue, in v3, in the tailwind.config.js you could specify line height along with font size, something like this

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}

But in v4, you need to specify them in separate variables. e.g.

  --text-sm: 14px;
  --text-sm-line-height: 20px;
  --text-base: 16px;
  --text-base-line-height: 24px;

The script that converts your config.json keeps both values in the single property e.g.

  --text-sm: 14px, 20px;

which doesn't resolve to a valid value for the font-size so it's ignored

Moving them to separate properties resolves the issue

[lvzhenbo]

I think I've been misled by the official docs, can clarify this somewhere, this issue has been bugging me since the beta version of v4
https://tailwindcss.com/docs/preflight#disabling-preflight