Tailwind CSS v4：组件CSS中@screen与@apply响应式失效问题

问题原因 #

Tailwind CSS v4已经完全移除了自定义的@screen指令，改用CSS原生媒体查询+内置CSS变量的方式实现响应式逻辑。你之前使用的@screen lg是v3及更早版本的写法，v4不再识别该语法，所以响应式代码块被直接忽略，导致大屏幕下字体大小不生效。

解决办法 #

将@screen lg替换为对应的原生媒体查询即可，有两种写法：

1. 直接使用断点对应的像素值（Tailwind v4默认lg断点为1024px）：

@layer components {
  .subtitle {
    @apply text-sm font-montserrat font-medium;
  }

  @media (min-width: 1024px) {
    .subtitle {
      @apply text-[21px];
    }
  }
}

2. 使用Tailwind内置的断点CSS变量（更灵活，自定义断点时无需手动修改像素值）：

@layer components {
  .subtitle {
    @apply text-sm font-montserrat font-medium;
  }

  @media (min-width: var(--tw-breakpoint-lg)) {
    .subtitle {
      @apply text-[21px];
    }
  }
}

补充说明 #

Tailwind v4的设计方向是尽可能贴近原生CSS生态，因此移除了@screen这类自定义指令。如果需要调整断点尺寸，只需在tailwind.config.js中配置，对应的--tw-breakpoint-*变量会自动同步更新。

内容的提问来源于stack exchange，提问作者idknojust