Tailwind v4迁移：如何为媒体断点定义自定义变体？

你给出的@custom-variant语法在Tailwind v4里无效——这个指令是Tailwind v3及更早版本的自定义变体语法，v4已经移除了该指令，改用新的配置方式。

在Tailwind v4中，自定义媒体断点/查询有两种推荐方式：

1. 扩展主题断点（推荐） #

直接在tailwind.config.js的theme.extend.screens中定义你的断点，这是最贴合Tailwind响应式系统的方式，定义后可以像使用默认断点一样用前缀调用：

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      screens: {
        'max-xs': {'max': '375px'},
        'max-sm': {'max': '576px'},
        'max-md': {'max': '768px'},
      },
    },
  },
}

使用示例：

<div class="max-xs:text-sm max-sm:text-base max-md:text-lg">
  适配不同小屏尺寸的文本
</div>

2. 通过插件API定义自定义变体 #

如果需要更灵活的媒体查询（非断点类场景），可以用Tailwind的插件API，通过addVariant方法定义：

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    function({ addVariant }) {
      addVariant('max-xs', '@media (max-width: 375px)');
      addVariant('max-sm', '@media (max-width: 576px)');
      addVariant('max-md', '@media (max-width: 768px)');
    },
  ],
}

这种方式的使用逻辑和上面一致，同样可以通过max-xs:这类前缀调用样式。

对于你的迁移场景，优先推荐第一种扩展断点的方式，它能更好地和Tailwind的原生响应式系统整合，减少学习成本，也更符合v4的设计思路。

内容的提问来源于stack exchange，提问作者Paul Razvan Berg