Tailwind CSS on GitHub

断点

自定义断点。

Basic customization

在配置文件中的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-widthmax-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选项会特别有用。

你所需要做的就是把print设备屏幕加入到theme.extend.screens

// 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>