自定义屏幕

​配置自定义屏幕

你在 tailwind.config.js 文件的 theme.screens 部分定义项目的断点。键成为你的 响应修饰符（如 md:text-center），值是断点应开始的 min-width。

¥You define your project’s breakpoints in the theme.screens section of your tailwind.config.js file. The keys become your responsive modifiers (like md:text-center), and the values are the min-width where that breakpoint should start.

默认断点的灵感来自于常见的设备分辨率：

¥The default breakpoints are inspired by common device resolutions:

/** @type {import('tailwindcss').Config} */
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) { ... }
    }
  }
}

你可以随意拥有尽可能少或尽可能多的屏幕，以你喜欢的项目命名方式命名它们。

¥Feel free to have as few or as many screens as you want, naming them in whatever way you’d prefer for your project.

​覆盖默认值

¥Overriding the defaults

要完全替换默认断点，请直接在 theme 键下添加自定义 screens 配置：

¥To completely replace the default breakpoints, add your custom screens configuration directly under the theme key:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

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

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

你尚未覆盖的任何默认屏幕（例如使用上述示例的 xl）都将被删除，并且不能用作屏幕修饰符。

¥Any default screens you haven’t overridden (such as xl using the above example) will be removed and will not be available as screen modifiers.

​覆盖单个屏幕

¥Overriding a single screen

要覆盖单个屏幕尺寸（如 lg），请在 theme.extend 键下添加自定义 screens 值：

¥To override a single screen size (like lg), add your custom screens value under the theme.extend key:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}

这将用相同的名称替换默认的 screens 值，而不更改断点的顺序。

¥This will replace the default screens value with the same name, without changing the order of your breakpoints.

​添加更大的断点

¥Adding larger breakpoints

添加额外的更大断点的最简单方法是使用 extend 键：

¥The easiest way to add an additional larger breakpoint is using the extend key:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  plugins: [],
}

这会将你的自定义屏幕添加到默认断点列表的末尾。

¥This will add your custom screen to the end of the default breakpoint list.

​添加较小的断点

¥Adding smaller breakpoints

如果要添加额外的小断点，则不能使用 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.

相反，覆盖整个 screens 键，重新指定默认断点：

¥Instead, override the entire screens key, re-specifying the default breakpoints:

const defaultTheme = require('tailwindcss/defaultTheme')

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

我们在 tailwindcss/defaultTheme 公开默认主题，因此你不必自己维护默认断点列表。

¥We expose the default theme at tailwindcss/defaultTheme so you don’t have to maintain the list of default breakpoints yourself.

​使用自定义屏幕名称

¥Using custom screen names

你可以根据自己的喜好命名自定义屏幕，并且不限于遵循 Tailwind 默认使用的 sm/md/lg/xl/2xl 约定。

¥You can name your custom screens whatever you like, and are not limited to following the sm/md/lg/xl/2xl convention that Tailwind uses by default.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

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

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

你的响应修饰符将反映这些自定义屏幕名称，因此在你的 HTML 中使用它们现在看起来像这样：

¥Your responsive modifiers will reflect these custom screen names, so using them in your HTML would now look like this:

<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>

​高级配置

¥Advanced configuration

默认情况下，断点是最小宽度以鼓励 mobile-first 工作流程。如果你需要对媒体查询进行更多控制，你还可以使用对象语法来定义它们，该语法允许你指定明确的最小宽度和最大宽度值。

¥By default, breakpoints are min-width to encourage a mobile-first workflow. If you need more control over your media queries, you can also define them using an object syntax that lets you specify explicit min-width and max-width values.

​最大宽度断点

¥Max-width breakpoints

如果你想使用最大宽度断点而不是最小宽度断点，你可以使用 max 键将屏幕指定为对象：

¥If you want to work with max-width breakpoints instead of min-width, you can specify your screens as objects with a max key:

/** @type {import('tailwindcss').Config} */
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) { ... }
    }
  }
}

确保按降序列出最大宽度断点，以便它们按预期相互覆盖。

¥Make sure to list max-width breakpoints in descending order so that they override each other as expected.

​固定范围断点

¥Fixed-range breakpoints

如果你希望断点同时指定 min-width 和 max-width，请同时使用 min 和 max 键：

¥If you want your breakpoints to specify both a min-width and a max-width, use the min and max keys together:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

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

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

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

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

与常规的最小宽度或最大宽度断点不同，以这种方式定义的断点只有在视口大小明确在定义范围内时才会生效。

¥Unlike regular min-width or max-width breakpoints, breakpoints defined this way will only take effect when the viewport size is explicitly within the defined range.

<div class="md:text-center">
  This text will be centered on medium screens, but revert back
  to the default (left-aligned) at all other screen sizes.
</div>

​多范围断点

¥Multi-range breakpoints

有时将单个断点定义应用于多个范围可能很有用。

¥Sometimes it can be useful to have a single breakpoint definition apply in multiple ranges.

例如，假设你有一个侧边栏并希望你的断点基于内容区域宽度而不是整个视口。当侧边栏变得可见并缩小内容区域时，你可以通过让你的断点之一回落到较小的断点来模拟这一点：

¥For example, say you have a sidebar and want your breakpoints to be based on the content-area width rather than the entire viewport. You can simulate this by having one of your breakpoints fall back to a smaller breakpoint when the sidebar becomes visible and shrinks the content area:

/** @type {import('tailwindcss').Config} */
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',
    }
  }
}

​自定义媒体查询

¥Custom media queries

如果你想完全控制生成的媒体查询，请使用 raw 键：

¥If you want full control over the generated media query, use the raw key:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}

使用 raw 键定义的媒体查询将按原样输出，而 min 和 max 键将被忽略。

¥Media queries defined using the raw key will be output as-is, and the min and max keys will be ignored.