自定义屏幕

​配置自定义屏幕

你在 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) { ... }
      },
    },
  },
}

这将用指定值替换该断点的默认值。

¥This will replace the default value for that breakpoint with the specified value.

​添加新断点

¥Adding new breakpoints

添加新断点的最简单方法是使用 extend 键：

¥The easiest way to add a new breakpoint is using the extend key:

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

Tailwind 将自动对断点进行排序，以确保先插入较小的断点，将较大的断点附加到末尾。

¥Tailwind will automatically sort your breakpoints to make sure smaller breakpoints are inserted first, and larger breakpoints are appended to the end.

​使用自定义屏幕名称

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