Tailwind CSS home page
Tailwind CSS on GitHub

断点

自定义项目的默认断点。

基础的定制

您的 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 }
}

最大宽度断点

如果您想使用最大宽度断点而不是最小宽度断点，您可以指定您的屏幕为具有 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>
主题颜色