TailwindCSS中等屏幕(md)margin不生效问题求助

问题原因分析 #

你遇到的md:mx-[400px]不生效，核心原因是18英寸屏幕的实际视口宽度超过了Tailwind默认的lg断点阈值。Tailwind默认断点规则：

• md：768px及以上
• lg：1024px及以上

如果你的18英寸屏幕分辨率（比如常见的1920×1080）对应的视口宽度大于1024px，浏览器会优先应用优先级更高的lg:mx-[600px]，md的样式会被覆盖。

解决方案 #

1. 确认当前屏幕的实际视口宽度
   打开浏览器开发者工具（按F12），在控制台输入window.innerWidth，查看当前屏幕的视口宽度，确认它落在哪个断点区间。

2. 自定义断点适配屏幕（推荐）
   根据你实际的屏幕尺寸，在tailwind.config.js中自定义断点，精准匹配18英寸和21英寸屏幕的宽度：

   module.exports = {
     theme: {
       screens: {
         'md': '1400px', // 对应18英寸屏幕的视口宽度
         'lg': '1900px', // 对应21英寸屏幕的视口宽度
       },
     },
   }
   

   注意：断点值必须从小到大排序，Tailwind会自动按尺寸优先级加载对应样式。

3. 改用匹配的默认断点
   如果18英寸屏幕宽度在1280px-1535px之间，可直接替换默认断点，保留原样式逻辑：

   <div className='story_section bg-white mt-5 rounded-lg shadow-lg xl:mx-[400px] lg:mx-[600px]'></div>
   

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