自定义屏幕 - Tailwind CSS 中文

配置自定义屏幕

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

默认断点受常见设备分辨率的启发

tailwind.config.js

/** @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) { ... }
    }
  }
}

可以根据需要设置任意数量的屏幕，并根据项目的喜好进行命名。

覆盖默认值

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

tailwind.config.js

/** @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）将被删除，并且无法作为屏幕修饰符使用。

覆盖单个屏幕

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

tailwind.config.js

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

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

添加更大的断点

添加其他较大断点最简单的方法是使用 extend 键

tailwind.config.js

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

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

添加较小的断点

如果你想添加其他较小的断点，则不能使用 extend，因为较小的断点将被添加到断点列表的末尾，而断点需要按从小到大的顺序排列，才能按预期与最小宽度断点系统配合使用。

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

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

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

我们在 tailwindcss/defaultTheme 中公开了默认主题，这样你就不必自己维护默认断点列表。

使用自定义屏幕名称

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

tailwind.config.js

/** @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 中使用它们现在看起来像这样

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

高级配置

默认情况下，断点是最小宽度，以鼓励移动优先工作流程。如果您需要对媒体查询进行更多控制，还可以使用对象语法定义它们，该语法允许您指定显式最小宽度和最大宽度值。

最大宽度断点

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

tailwind.config.js

/** @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) { ... }
    }
  }
}

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

固定范围断点

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

tailwind.config.js

/** @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) { ... }
    },
  }
}

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

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

多范围断点

有时，让单个断点定义在多个范围内应用可能很有用。

例如，假设您有一个侧边栏，并且希望您的断点基于内容区域宽度，而不是整个视口。您可以通过让其中一个断点在侧边栏变为可见并缩小内容区域时回退到较小的断点来模拟此操作

tailwind.config.js

/** @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',
    }
  }
}

自定义媒体查询

如果您希望完全控制生成的媒体查询，请使用 raw 键

tailwind.config.js

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

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

在此页面上