Tailwind CSS自定义响应式断点失效问题求助

数据老陈

2026-8-1

解决Tailwind CSS自定义max-width断点样式不生效问题

你的问题出在自定义断点的顺序上。Tailwind CSS生成媒体查询的顺序和你在tailwind.config.js中配置screens的顺序完全一致，而你用的是max-width类型的断点，必须按max值从大到小排序，否则小屏幕的样式会被大屏幕的媒体查询覆盖。

比如你的配置里laptopM（max-1280px）排在tablet（max-768px）后面，当屏幕宽度小于768px时，laptopM的媒体查询（max-width:1280px）依然生效，而且因为CSS优先级相同，后面的样式会覆盖前面的，导致tablet的样式永远不会生效。

修复步骤：

修改tailwind.config.js中的screens顺序，按max值从大到小排列：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      screens: {
        laptopL: { max: '1440px' },
        laptopM: { max: '1280px' },
        laptop: { max: '1024px' },
        tablet: { max: '768px' },
        mobileL: { max: '425px' },
        mobileM: { max: '375px' },
        mobileS: { max: '320px' },
      },
    },
  },
  plugins: [],
};