Usage of presets and plugins in tailwind v4

[MahirAlam]

I have my tailwind config like this...

// tailwind.config.ts
import tailwindPresetMantine from "tailwind-preset-mantine";
import { themeColors, themeBreakpoints, theme } from "./src/lib/theme";

const config = {
  presets: [
    tailwindPresetMantine({
      mantineColors: themeColors,
      mantineBreakpoints: themeBreakpoints,
    }),
  ],
  plugins: [pluginMantine(theme)],
};

export default config;

and migrating to v4 I can't use presets. I can't even use plugins properly.

[philipp-spiess]

Hey! You can load presets as part of the JS config files with the @config directive: https://tailwindcss.com/docs/v4-beta#using-legacy-configuration-files

[MahirAlam]

I am already using JS config files with the @config directive
but then the performance isn't good and what about the plugins?

Thank you for quick response, by the way!

[dvzrd]

Hey! You can load presets as part of the JS config files with the @config directive: https://tailwindcss.com/docs/v4-beta#using-legacy-configuration-files

What about if you have your theme and other layers configured in a css stylesheet and you want to extend it in a separate stylesheet?

I know there's this example for importing a theme reference:

@import "../../my-theme.css" theme(reference);

But what if I want to import the other layers I modified as well? Do you just have to import different layers at a time?

For example, I have a main stylesheet in a ui package that I want to import into a next-ui package that will override fonts like this:

@import "../../../ui/src/styles/main.css";

@theme {
  --font-body: var(--font-playfair-display), theme(--font-body);
  --font-heading: var(--font-inter), theme(--font-heading);
}

I'm guessing the best way to do this would be to break up the main stylesheet into layers and import each layer separately to avoid duplicating tailwind styles? Per this section here: https://tailwindcss.com/docs/v4-beta#disabling-preflight