Tailwind媒体查询问题：文本断点样式不符合预期

• 核心问题：你使用的text-md并非Tailwind CSS的默认文本尺寸类。默认Tailwind提供的文本类包含text-xs、text-sm、text-base、text-lg等，但没有text-md，这直接导致了你的类不生效：

  • 写text-md sm:text-sm时，无前缀的text-md无效，元素会使用浏览器默认文本大小（通常等同于text-base），当屏幕达到sm断点时text-sm生效，所以文本变小，与需求相反；
  • 改成text-sm sm:text-md时，sm:text-md无效，所有断点仅生效text-sm，导致文本大小无变化。

• 解决办法：

  1. 改用默认类：将text-md替换为text-base（默认1rem，对应常规中等文本大小），比如写成text-sm sm:text-base，这样小屏幕显示text-sm，≥sm断点时显示text-base；
  2. 自定义text-md类：如果一定要用这个类名，在tailwind.config.js中扩展字体尺寸：

     module.exports = {
       theme: {
         extend: {
           fontSize: {
             'md': '1rem', // 可根据需求调整数值，比如设为1.125rem与text-lg区分
           },
         },
       },
     }
     

     配置完成后重新编译Tailwind，text-md即可正常生效。

• 另一处md:text-sm text-xs正常的原因：text-xs和text-sm都是Tailwind默认存在的类，断点逻辑能正常触发。

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