Why are Next.js-generated Tailwind CSS @print declarations nested inside classes (wrong)?

[lancejpollard]

I am looking at my generated .css file in my Next.js 15.4.1 app, and am seeing stuff like this:

@layer utilities {
  /* ... css stuff */
  .print\:mr-8 {
    @media print {
      margin-right: 8px;
    }
  }
  .print\:mb-4 {
    @media print {
      margin-bottom: 4px;
    }
  }
  /* ... more css stuff */
}

In the ./app/layout.tsx I have:

import "./globals.css";

In there I have:

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

@import './reset.css';

@import 'katex/dist/katex.min.css';

@import './fonts.css';
@import './code.css';

@import 'tailwindcss';
@config "../tailwind.config";

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

In my tailwind.config.ts I have:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './lib/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    screens: {
      print: { raw: 'print' },
      screen: { raw: 'screen' },
    },
    extend: {
      // style stuff
    }
  }
  darkMode: 'media',
  plugins: [
    require('@tailwindcss/postcss'),
    require('tailwindcss-radix')(),
  ],
}

export default config

What is wrong, why is it nesting the @print inside the class .print? It should be the other way around:

@layer utilities {
  /* ... css stuff */
  @media print {
    .print\:mr-8 {
      margin-right: 8px;
    }

    .print\:mb-4 {
      margin-bottom: 4px;
    }
  }
  /* ... more css stuff */
}

[SametDulger]

Tailwind's print classes are being nested incorrectly due to either a misconfigured PostCSS plugin or improper use of @import 'tailwindcss'.

Stick with @tailwind base;, @tailwind components;, and @tailwind utilities; in your main CSS.

Remove the suspicious plugin @tailwindcss/postcss.

Don’t use @import 'tailwindcss'; or @config unless you’re in a rare advanced use case (and know what you're doing).

[icyJoseph]

Doesn't this look this other issue? tailwindlabs/tailwindcss#16438