Question

我注册了一个自定义断点 ('mymd': '962px')，之后所有宽度较低的断点都不起作用

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'mymd': '962px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
  variants: {
    extend: {},
  },
  plugins: [

  ],
}

html

<div class="sm:bg-red-900 
            md:bg-yellow-900 
            mymd:bg-gray-900 
            lg:bg-green-900 
            xl:bg-blue-900 
            2xl:bg-indigo-900 
            h-screen w-full">

2xl、xl、lg 和 mymd 正常工作，但 md 和 sm 不起作用

img - https://ibb.co/D4x3vF8

Answer 1

尝试扩展，

theme: {
 screens: {
   'sm': '640px',
   'md': '768px',
   'lg': '1024px',
   'xl': '1280px',
   '2xl': '1536px',
  },
  extend: {
    screens: {
      'mymd': '962px'
    }
  },
},

更新：

似乎工作正常 - 检查这个 sandbox 您可以查看结果 here

Answer 2

我无法在默认断点之间创建新断点，但我做到了

主题

const defaultTheme = require('tailwindcss/defaulttheme');

module.exports = {
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    screens: {
      'xs': '425px',
      ...defaultTheme.screens,
    },
    extend: {
      screens: {
        '3xl': '1920px',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [

  ],
}

HTML

<div class="sm:bg-red-900
            lg:bg-green-900
            3xl:bg-indigo-900
            h-screen w-full">
</div>

Tailwind CSS 自定义断点不起作用

2 个答案: