tailwindcss自定义断点会导致默认端点失效，请问怎么解决？

Question

module.exports = {
  theme: {
    extend: {
      screens: {
        'max-lg-inclusive': { 'max': '1024px' }, // 扩展自定义断点
      },
    },
  },
};

这样配置后 max-lg-inclusive:w-[55rem]正确生成代码了，但是max-lg:w-[60rem]不会生成代码了，所有max-*的断点都失效了，不会生成代码。

不是css优先级失效,是直接没有生成css代码

Answer 1

module.exports = {
  theme: {
    extend: {
      screens: {
        // 明确默认断点为 min-width，确保生成 max-* 变体
        'sm': { 'min': '640px' },
        'md': { 'min': '768px' },
        'lg': { 'min': '1024px' },
        'xl': { 'min': '1280px' },
        '2xl': { 'min': '1536px' },
        // 添加自定义的 max 断点（使用不同的名称）
        'max-lg-inclusive': { 'max': '1024px' },
      },
    },
  },
};