自定义屏幕

​配置自定义屏幕

你可以在 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)

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

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