Why is tailwind not using my typography.css?

Question

I have a NextJS application using TailWind and shadcn. I want to split my global.css into separate files, like for typography:

global.css:

@import "./typography.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        @apply text-2xl md:text-3xl lg:text-4xl;
    }

However, if I want to move the style for h1 into typography.css, it never gets applied.

typography.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        color: red; /* will be used, but NOT the @apply */
        @apply text-2xl md:text-3xl lg:text-4xl;
    }

    h2 {
        @apply text-2xl md:text-3xl lg:text-4xl;
    }

    h3 {
        @apply text-xl md:text-2xl lg:text-3xl;
    }

    h4 {
        @apply text-lg md:text-xl lg:text-2xl;
    }

    p {
        @apply text-base md:text-lg; 
    }
}

So when the CSS for h1 sits in global.css, it works. When I remove it and leave it only in the imported typography.css, it won't get applied. When I add a simple color: redstatement, this will be used. But not the @apply-statements.

My talwind.config.js includes all CSS-files:

const config: Config = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{css}",
  ],

What do I miss here?

Answer 1

The TailwindCSS @base styles in global.css are being applied over your styles in typography.css. With the setup you're going for, you can fix the issue by putting body in front of your style declarations to increase their specificity, like so:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body h1 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }

  body h2 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }

  body h3 {
    @apply text-xl md:text-2xl lg:text-3xl;
  }

  ...rest of styles
}

Here is a working example.