Tailwind CSS响应式设计：大屏下取消flex-col属性的实现方法

有两种简单的实现方式，按需选择即可：

方法一：自定义响应式断点（推荐，便于后续复用） #

Tailwind 默认的响应式断点没有刚好匹配600px的，你可以先在项目的tailwind.config.js里添加自定义断点：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '600up': '600px', // 定义屏幕≥600px时的断点标识
      // 保留原默认断点（可选）
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
    },
  },
}

之后修改你的元素类名：

<div className="flex flex-col 600up:flex-row"></div>

原理：移动端（<600px）时flex-col生效，元素垂直排列；当屏幕宽度≥600px时，600up:flex-row会覆盖flex-col的样式，元素恢复flex默认的水平排列。

方法二：使用动态断点（无需修改配置） #

如果不想改动配置文件，直接用Tailwind的动态断点语法，仅针对≤599px的屏幕应用flex-col：

<div className="flex max-[599px]:flex-col"></div>

原理：默认状态下（屏幕>599px，即>600px）只有flex生效，元素水平排列；当屏幕≤599px时，max-[599px]:flex-col触发，元素切换为垂直排列，完全匹配你的需求。

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