如何在Tailwind CSS v4中处理360px移动端断点？

嗨，这个需求我碰到过好多次了，Tailwind CSS v4其实给了很灵活的自定义断点方案，完全没必要写原生CSS媒体查询——这才是符合Tailwind最佳实践的做法，我给你一步步说清楚：

首先得明确你的场景：默认样式是桌面端，当屏幕宽度≤360px时才调整样式，所以我们需要定义一个max-width类型的自定义断点。

第一步：修改Tailwind配置文件 #

找到你的tailwind.config.js（TS项目就是tailwind.config.ts），在theme.extend.screens里添加自定义断点，名字可以随便取，比如叫xs-max，见名知意就行：

export default {
  theme: {
    extend: {
      screens: {
        'xs-max': {'max': '360px'},
      },
    },
  },
}

第二步：在代码中使用自定义断点类 #

现在你就能像用Tailwind自带的sm:、md:这些前缀一样，用xs-max:来给360px及以下的屏幕写样式了。举个实际的例子：
比如你默认桌面端用大号字体和4列网格，到了360px的小手机上要改成小号字体和单列网格，代码就可以这么写：

<div class="text-xl xs-max:text-sm grid grid-cols-4 xs-max:grid-cols-1 p-4">
  这是你的响应式内容
</div>

额外补充：如果是移动优先的场景 #

要是你之后改成移动优先的设计（默认是移动端样式，桌面端加断点），也可以定义一个min-width的xs断点：

export default {
  theme: {
    extend: {
      screens: {
        'xs': '360px',
        // 保留默认的sm、md、lg等断点
      },
    },
  },
}

这样xs:text-xl就会在屏幕宽度≥360px时生效，默认则是移动端的基础样式。

最后再啰嗦一句：尽量别写原生CSS媒体查询，那样会把样式拆得七零八落，用Tailwind的自定义断点能统一管理所有响应式规则，维护起来方便多了。

内容来源于stack exchange