Tailwind v3迁移v4：复杂自定义断点从config.js转至css

Tailwind v4 中可以在 @theme 规则内直接复用你原来的复杂断点逻辑，无需修改页面标记，具体分两种方式实现：

方式一：直接在 --screens 配置中使用 raw 属性 #

在你的 tailwind.css 文件的 @theme 块中，直接按照 Tailwind v3 的结构定义包含 raw 属性的断点，类名会和原来完全一致：

/* tailwind.css */
@theme {
  --screens: {
    /* 基础断点保持原样 */
    tablet: '640px',
    /* 带多条件的复杂断点，直接复用原 raw 内容 */
    desktop: { raw: '(min-width: 1024px) and (prefers-color-scheme: dark)' },
    /* 其他复杂断点同理 */
    touch-desktop: { raw: '(min-width: 1280px) and (pointer: coarse)' },
  };
}

配置完成后，Tailwind 会生成和 v3 中完全相同的响应式类（比如 desktop:bg-gray-800），对应的媒体查询就是你定义的 raw 条件，页面中的原有标记无需修改。

方式二：使用自定义媒体查询复用复杂条件 #

如果你的复杂断点需要在多个地方复用，可以先定义 CSS 自定义媒体查询，再在 --screens 中引用：

/* tailwind.css */
/* 先定义自定义媒体查询 */
@custom-media --dark-desktop (min-width: 1024px) and (prefers-color-scheme: dark);
@custom-media --touch-large-screen (min-width: 1280px) and (pointer: coarse);

@theme {
  --screens: {
    tablet: '640px',
    /* 直接引用自定义媒体查询名称 */
    desktop: '--dark-desktop',
    touch-desktop: '--touch-large-screen',
  };
}

这种方式更适合逻辑复杂或需要重复使用的断点，同样能保持原有类名不变。

验证方法 #

构建项目后，查看生成的 CSS 文件，确认对应响应式类的媒体查询是否和你定义的 raw 条件一致，比如 .desktop:bg-gray-800 应该对应：

@media (min-width: 1024px) and (prefers-color-scheme: dark) {
  .desktop\:bg-gray-800 {
    background-color: rgb(30 41 59);
  }
}

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