Tailwind CSS 断点

断点

自定义项目的默认断点。

您的 ​tailwind.config.js​ 文件的 ​theme.screens​ 部分定义您项目的断点。键是您的屏幕名称（用于 Tailwind 生成的响应功能类变体的前缀，如 ​md:text-center​），值是 ​min-width​，该断点应该开始的地方。

默认断点的设置来自于常见的设备分辨率。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

您可以自由地拥有您想要的多的屏幕，以任何您喜欢的方式为他们命名。

例如，您可以使用设备名称代替尺寸。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

这些屏幕名称将反映在您的功能类中，所以您的 ​text-center​ 功能类现在看起来像这样：

.text-center { text-align: center }

@media (min-width: 640px) {
  .tablet\:text-center { text-align: center }
}

@media (min-width: 1024px) {
  .laptop\:text-center { text-align: center }
}

@media (min-width: 1280px) {
  .desktop\:text-center { text-align: center }
}

扩展默认断点(Extending the default breakpoints)

添加额外更大断点的最简单方法是使用扩展键：(The easiest way to add an additional larger breakpoint is using the extend key:)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  variants: {},
  plugins: [],
}

如果要添加额外的小断点，则不能使用​extend​，因为小断点将添加到断点列表的末尾，并且断点需要从最小到最大排序才能按预期工作-宽度断点系统。(If you want to add an additional small breakpoint, you can’t use ​extend ​because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.)

相反，覆盖整个屏幕键，重新指定默认断点：(Instead, override the entire ​screens ​key, re-specifying the default breakpoints:)

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  variants: {},
  plugins: [],
}

最大宽度断点(Max-width breakpoints)

如果您想使用最大宽度断点而不是最小宽度断点，您可以指定您的屏幕为具有 ​max ​键的对象。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

      'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }

      'lg': {'max': '1023px'},
      // => @media (max-width: 1023px) { ... }

      'md': {'max': '767px'},
      // => @media (max-width: 767px) { ... }

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}

与最小宽度断点相比，确保以相反的顺序列出它们，以便它们按照预期的方式相互覆盖。

例如，如果有必要，您甚至可以同时用 ​min-width​ 和 ​max-width​ 定义创建断点。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px', 'max': '1535px'},
      '2xl': {'min': '1536px'},
    },
  }
}

多范围断点

有时，一个断点定义适用于多个范围可能很有用。

例如，假设您有一个侧边栏，并希望您的断点是基于内容区域的宽度，而不是整个视口。您可以模拟这种情况，当侧边栏变得可见并缩小内容区域时，您的一个断点会回到一个较小的断点。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

自定义媒体查询

如果您需要为断点提供一个完全自定义的媒体查询，您可以使用一个带有 ​raw ​键的对象来实现。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'portrait': {'raw': '(orientation: portrait)'},
        // => @media (orientation: portrait) { ... }
      }
    }
  }
}

为打印设置风格

如果您需要专门为打印应用不同的风格，​raw ​选项可能特别有用。

您需要做的就是在 ​theme.extend.screens​ 下添加一个 ​print ​屏幕：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}

然后，您可以使用像 ​print:text-black​ 这样的类来指定只有当有人试图打印您正在处理的页面时才会应用的样式：

<div class="text-gray-700 print:text-black">
  <!-- ... -->
</div>