Tailwind自定义断点padding媒体查询失效问题求助

1. 先修复配置里重复的plugins字段 #

你配置文件里重复写了两次plugins，后面的空数组直接覆盖了前面的tw-elements插件配置，这大概率会搞乱样式生成逻辑。改完的配置应该是这样：

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: false,
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    screens: {
      'sml': '576px',
      'mdm': '768px',
      'nrm': '992px',
      'lrg': '1280px',
      'max': '1564px',
    },
    extend: {
    },
  },
  plugins: [
    require('tw-elements/dist/plugin')
  ],
}

2. 清缓存重新构建 #

Next.js和Tailwind的缓存有时候会搞事情，直接删掉.next文件夹，再重新跑npm run dev或者yarn dev试试。

3. 检查浏览器里的样式情况 #

打开浏览器开发者工具，把屏幕拉到576px以上，看main元素的padding：

• 先找有没有sml:p-4对应的媒体查询规则，要是压根没有，说明Tailwind没生成这个样式，得检查content配置有没有覆盖到这个组件文件。
• 要是规则存在但被划掉了，看看是不是有其他样式优先级更高——不过你已经设了important: false，Tailwind不会给基础样式加!important，大概率还是生成顺序的问题，也就是sml的媒体查询写在了p-2前面，导致被覆盖。

4. 排查tw-elements插件的影响 #

要是改完配置清完缓存还不行，先把tw-elements插件注释掉，重新构建项目。如果问题消失了，说明这个插件和自定义断点的样式生成有冲突，得调整插件配置或者换个方式使用插件。

5. 备选：把断点放到extend里 #

如果上面的方法都没用，可以试试把自定义断点移到theme.extend.screens里，这样不会完全替换默认断点，只是新增自定义的，可能避免配置冲突：

theme: {
  extend: {
    screens: {
      'sml': '576px',
      'mdm': '768px',
      'nrm': '992px',
      'lrg': '1280px',
      'max': '1564px',
    },
  },
},

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