Next.js + Tailwind CSS: Conflict between breakpoints and custom CSS classes

I defined breakpoints in globals.css like below.

@theme inline {
  --breakpoint-sm: 375px;
  --breakpoint-md: 744px;
  --breakpoint-lg: 1200px;
  /* ... */
}

Then in index.css, I created custom CSS classes like this.

.text-700-28 {
  font: 700 1.75rem "noto", serif;
}

.text-700-24 {
  font: 700 1.5rem "noto", serif;
}

.text-400-24 {
  font: 400 1.5rem "noto", serif;
}

/* ... */

When I tried to use the custom classes combined with breakpoints in my components, the responsive styles didn't apply — only text-400-12 was applied.

<div className="rounded-[2px] w-full border-1 flex flex-col border-gray-200 gap-[15px] py-[15px] text-400-12 md:text-400-14 lg:text-400-16">
  <div className="px-[20px]">Low to High Price</div>
  <div className="px-[20px]">High to Low Price</div>
  <div className="px-[20px]">CreatedAt</div>
</div>

Why is this happening?

TLDR: To prevent TailwindCSS from being overridden, you need to use layers. In order for certain classes, like text-400-24 and text-700-28, to properly override each other, you need to declare utilities; see the perfect solution in the last example.

@layer plays an important role in CSS. The issue you discovered stems from the fact that you declared your custom CSS classes as unlayered. However, in CSS, unlayered classes have higher specificity than any class defined within a @layer.

• CSS: @layer at-rule - MDN Docs
• @layer priority - MDN Docs

The solution is to place all your custom classes within the appropriate layer - for example, @layer base.

• From v4 the reset style cannot be overridden by TailwindCSS classes - StackOverflow
• Adding base styles - TailwindCSS v4 Docs

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme inline {
  --breakpoint-sm: 375px;
  --breakpoint-md: 744px;
  --breakpoint-lg: 1200px;
}

@layer base {
  .text-700-28 {
    font: 700 1.75rem "noto", serif;
  }

  .text-700-24 {
    font: 700 1.5rem "noto", serif;
  }

  .text-400-24 {
    font: 400 1.5rem "noto", serif;
  }
}
</style>

<div class="p-2 flex flex-col gap-2 text-400-24 md:text-700-28">
  <div>Low to High Price</div>
  <div>High to Low Price</div>
  <div>CreatedAt</div>
</div>

Click on Full Page to view the md version.

Note: I modified the classes, as the ones in the example HTML were not mentioned in the question. I replaced them with the classes from the question: 400-24 and 700-28.

Note: The reason why the md isn't working is that .text-700-28 is being overridden by the later declared .text-400-24.

In this case, the order of class declarations also matters; so I'd also consider using a utility declaration. You could do it like this:

• Adding custom styles: Simple utilities - TailwindCSS v4 Docs

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme inline {
  --breakpoint-sm: 375px;
  --breakpoint-md: 744px;
  --breakpoint-lg: 1200px;
}

@utility text-700-28 {
  font: 700 1.75rem "noto", serif;
}

@utility text-700-24 {
  font: 700 1.5rem "noto", serif;
}

@utility text-400-24 {
  font: 400 1.5rem "noto", serif;
}
</style>

<div class="p-2 flex flex-col gap-2 text-400-24 md:text-700-28">
  <div>Low to High Price</div>
  <div>High to Low Price</div>
  <div>CreatedAt</div>
</div>