自定义屏幕 - Tailwind CSS

配置自定义屏幕

您可以在 tailwind.config.js 文件的 theme.screens 部分中定义项目的断点。键变为您的 responsive modifiers（如 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>

高级配置

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

最大宽度断点

如果您想要使用最大宽度断点而不是最小宽度断点，则可以使用 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 键将被忽略。

On this page