TailwindCSS条件类应用异常：横竖屏图片宽度不生效排查

核心问题1：错误替换默认断点配置 #

你直接在tailwind.config.js中赋值screens对象，这会完全替换Tailwind的默认断点（sm/md/lg等），导致代码里的md:m-auto、lg:w-[32rem]这些类根本不会被生成。同时，自定义的landscape断点优先级也可能因为缺少默认断点的上下文而异常。

核心问题2：断点顺序与CSS优先级冲突 #

即便自定义断点生效，若保留默认断点，lg断点（min-width:1024px）的媒体查询会比landscape的优先级高（CSS中后定义的规则会覆盖先定义的），导致横屏时lg:w-[32rem]会覆盖landscape:w-80。

解决步骤 #

1. 保留默认断点，扩展自定义方向断点
   修改tailwind.config.js，用extend添加自定义断点，避免替换默认配置：

   module.exports = {
     theme: {
       extend: {
         screens: {
           'portrait': { 'raw': '(orientation: portrait)' },
           'landscape': { 'raw': '(orientation: landscape)' },
         },
       },
     },
   }
   

2. 调整断点顺序（若需横屏覆盖大屏断点）
   如果希望横屏时的宽度优先级高于lg等大屏断点，需要重新定义完整的screens数组，把landscape放在最后：

   module.exports = {
     theme: {
       screens: {
         sm: '640px',
         md: '768px',
         lg: '1024px',
         xl: '1280px',
         '2xl': '1536px',
         'portrait': { 'raw': '(orientation: portrait)' },
         'landscape': { 'raw': '(orientation: landscape)' },
       },
     },
   }
   

3. 重启开发服务器，验证类是否生成
   修改配置后必须重启Tailwind的编译服务（比如Vite、Webpack dev server），确保新的landscape:w-80类被正确编译到CSS中。

4. 开发者工具调试验证
   在浏览器开发者工具中：

   • 检查图片元素的类列表，确认landscape:w-80存在
   • 查看该类对应的CSS规则是否被应用（是否被划掉，是否有更高优先级的规则覆盖）

可选优化：组合断点类 #

如果只需要在大屏+横屏时应用特定宽度，可以使用组合断点：

<img src="./assets/home/hero.png" alt="Hero" class="mx-auto w-full object-cover md:m-auto md:h-full lg:w-[32rem] lg:landscape:w-80" />

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