Breakpoint not applying on text and header styles in v4

[fessor10]

I'm having an issue with responsive typography classes in my Tailwind CSS setup. The text-* classes work properly, but the header-* classes aren't responding to breakpoints.

My Current Setup

I've created custom header and text classes with various size variants. Here's my CSS:

@import "tailwindcss";

@theme {
    /* header text */
  --header-4xl-font-size: 6.5rem; 
  --header-4xl-line-height: 9.75rem; 
  --header-4xl-letter-spacing: -0.02em; 

  --header-3xl-font-size: 5.75rem; 
  --header-3xl-line-height: 8.625rem; 
  --header-3xl-letter-spacing: -0.02em;

  --header-2xl-font-size: 4.5rem; 
  --header-2xl-line-height: 5.625rem; 
  --header-2xl-letter-spacing: -0.02em;

  --header-xl-font-size: 3.5rem; 
  --header-xl-line-height: 4.5rem; 
  --header-xl-letter-spacing: -0.02em;

  --header-lg-font-size: 3rem; 
  --header-lg-line-height: 3.75rem; 
  --header-lg-letter-spacing: -0.02em;

  --header-md-font-size: 2.25rem; 
  --header-md-line-height: 2.75rem; 
  --header-md-letter-spacing: -0.02em;

  --header-sm-font-size: 1.875rem; 
  --header-sm-line-height: 2.375rem; 
  --header-sm-letter-spacing: -0.02em;

  --header-xs-font-size: 1.5rem; 
  --header-xs-line-height: 2rem;
  --header-xs-letter-spacing: -0.02em; 

  /* body text */

  --text-7xl-font-size: 4.5rem; 
  --text-7xl-line-height: 5.625rem;

  --text-6xl-font-size: 3.75rem;
  --text-6xl-line-height: 4.5rem; 

  --text-5xl-font-size: 3rem; 
  --text-5xl-line-height: 3.75rem;

  --text-4xl-font-size: 2.25rem; 
  --text-4xl-line-height: 2.75rem;

  --text-3xl-font-size: 1.875rem; 
  --text-3xl-line-height: 2.375rem;

  --text-2xl-font-size: 1.5rem; 
  --text-2xl-line-height: 2rem;

  --text-xl-font-size: 1.25rem; 
  --text-xl-line-height: 1.875rem;

  --text-lg-font-size: 1.125rem; 
  --text-lg-line-height: 1.75rem;

  --text-md-font-size: 1rem; 
  --text-md-line-height: 1.5rem;

  --text-sm-font-size: 0.875rem; 
  --text-sm-line-height: 1.25rem;

  --text-xs-font-size: 0.75rem; 
  --text-xs-line-height: 1.125rem;
}

@layer components {
    .header-4xl {
      font-size: var(--header-4xl-font-size);
      line-height: var(--header-4xl-line-height);
      letter-spacing: var(--header-4xl-letter-spacing);
    }
    .header-3xl {
      font-size: var(--header-3xl-font-size);
      line-height: var(--header-3xl-line-height);
      letter-spacing: var(--header-3xl-letter-spacing);
    }
    .header-2xl {
      font-size: var(--header-2xl-font-size);
      line-height: var(--header-2xl-line-height);
      letter-spacing: var(--header-2xl-letter-spacing);
    }
    .header-xl {
      font-size: var(--header-xl-font-size);
      line-height: var(--header-xl-line-height);
      letter-spacing: var(--header-xl-letter-spacing);
    }
    .header-lg {
      font-size: var(--header-lg-font-size);
      line-height: var(--header-lg-line-height);
      letter-spacing: var(--header-lg-letter-spacing);
    }
    .header-md {
      font-size: var(--header-md-font-size);
      line-height: var(--header-md-line-height);
      letter-spacing: var(--header-md-letter-spacing);
    }
    .header-sm {
      font-size: var(--header-sm-font-size);
      line-height: var(--header-sm-line-height);
      letter-spacing: var(--header-sm-letter-spacing);
    }
    .header-xs {
      font-size: var(--header-xs-font-size);
      line-height: var(--header-xs-line-height);
      letter-spacing: var(--header-xs-letter-spacing);
    }
  }
  
  @layer components {
    .text-7xl {
      font-size: var(--text-7xl-font-size);
      line-height: var(--text-7xl-line-height);
    }
  
    .text-6xl {
      font-size: var(--text-6xl-font-size);
      line-height: var(--text-6xl-line-height);
    }
  
    .text-5xl {
      font-size: var(--text-5xl-font-size);
      line-height: var(--text-5xl-line-height);
    }
  
    .text-4xl {
      font-size: var(--text-4xl-font-size);
      line-height: var(--text-4xl-line-height);
    }
  
    .text-3xl {
      font-size: var(--text-3xl-font-size);
      line-height: var(--text-3xl-line-height);
    }
  
    .text-2xl {
      font-size: var(--text-2xl-font-size);
      line-height: var(--text-2xl-line-height);
    }
  
    .text-xl {
      font-size: var(--text-xl-font-size);
      line-height: var(--text-xl-line-height);
    }
  
    .text-lg {
      font-size: var(--text-lg-font-size);
      line-height: var(--text-lg-line-height);
    }
  
    .text-md {
      font-size: var(--text-md-font-size);
      line-height: var(--text-md-line-height);
    }
  
    .text-sm {
      font-size: var(--text-sm-font-size);
      line-height: var(--text-sm-line-height);
    }
  
    .text-xs {
      font-size: var(--text-xs-font-size);
      line-height: var(--text-xs-line-height);
    }
  }

The Problem

I'm trying to use responsive variants with my custom header classes, but they're not working as expected. The responsive variants for the text-* classes work fine, but not for the header-* classes.

Here's an example of what I'm trying to do:

<h1 className="font-duplicate font-bold text-base-950/50 header-md md:header-lg">
    lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.
</h1>

With this code, I expect the header to use the header-md class by default, and then switch to header-lg at the medium breakpoint. However, the md:header-lg part isn't being applied.

What I've Tried

• The regular header-md class works fine on its own
• The text-* classes work with responsive variants (e.g., text-sm md:text-lg)
• Other responsive utilities like hidden md:block work as expected

Questions

1. Am I missing something in how I've defined my custom header classes?
2. Do I need to modify my Tailwind configuration to enable responsive variants for component classes?
3. Is there a different syntax I should be using for responsive variants with custom component classes?

Any help would be greatly appreciated!

[wongjn]

1. Am I missing something in how I've defined my custom header classes?

Yes.

2. Do I need to modify my Tailwind configuration to enable responsive variants for component classes?

Yes.

3. Is there a different syntax I should be using for responsive variants with custom component classes?

Yes. Use @utility:

@utility header-4xl {
  @layer components {
    font-size: var(--header-4xl-font-size);
    line-height: var(--header-4xl-line-height);
    letter-spacing: var(--header-4xl-letter-spacing);
  }
}

@utility header-3xl {
  @layer components {
    font-size: var(--header-3xl-font-size);
    line-height: var(--header-3xl-line-height);
    letter-spacing: var(--header-3xl-letter-spacing);
  }
}

/* Etc. */

[fessor10]

Thank you! This works. I'm guessing I should do the same for text-*?

[wongjn]

For text-* they already exist in core, so you could look at adjusting your CSS variables to use the built-ins:

@theme {
  …
  --text-7xl: 4.5rem; 
  --text-7xl--line-height: 5.625rem;

  --text-6xl: 3.75rem;
  --text-6xl--line-height: 4.5rem;
  …
}

Though do be aware the built-ins go into the utilities @layer, not components.

Otherwise, you can use @utility for your text-* definitions, but do be aware there will be duplications with the core built-in text-* utilities.