Tailwind CSS - 自定义屏幕

Tailwind CSS - 自定义屏幕断点

屏幕断点（Screens）是 Tailwind CSS 中响应式设计的基石。它们定义了断点（例如 sm、md、lg），允许您在不同的视口尺寸下应用不同的样式。自定义这些屏幕断点可以让您根据特定的设计系统调整项目的响应行为。

所有屏幕断点自定义都发生在您的 tailwind.config.js 文件中的 theme.screens 对象内。默认情况下，Tailwind 使用的是移动优先的最小宽度（min-width）系统。

默认断点

tailwind.config.js

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) 时生效 { ... }
    }
  }
}

扩展 vs. 覆盖

您有两种主要的自定义策略：扩展（extending）或覆盖（overriding）。

扩展屏幕断点（推荐）

要添加新的断点或修改现有断点，同时保留默认值，请使用 extend 键。这是最常见的方法。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '1150px', // 覆盖默认的 'lg' 断点
        '3xl': '1920px', // 添加一个新的 '3xl' 断点
      },
    },
  },
}

覆盖所有屏幕断点

要用您自己的一组断点完全替换 Tailwind 的默认断点，请直接在 theme 下定义您的屏幕断点。警告： 这将移除所有默认断点（sm、md 等），除非您重新定义它们。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'tablet': '768px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  }
}

您的响应式修饰符现在将是 tablet:、laptop: 和 desktop:。

高级自定义

添加更小的断点

由于断点必须按从小到大的顺序排列，因此您不能使用 extend 来添加更小的断点（因为它会被附加到末尾）。相反，您可以导入默认主题并将其展开到您的自定义配置中。

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px', // 您新的、更小的断点
      ...defaultTheme.screens,
    },
  },
}

最大宽度断点（桌面优先）

如果您的项目遵循桌面优先（desktop-first）方法，您可以使用 max-width 定义断点。重要提示： 当使用 max-width 时，您必须将断点从大到小排列。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      '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 和 max 键的对象。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        // 仅针对 640px 到 767px 之间的设备
        'sm-only': {'min': '640px', 'max': '767px'},
      },
    },
  }
}

使用 raw 定义自定义媒体查询

为了获得完全的控制，raw 键允许您编写所需的任何媒体查询。这对于针对设备特性（如方向、指针类型或用户偏好）非常强大。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        'landscape': {'raw': '(orientation: landscape)'},
        'portrait': {'raw': '(orientation: portrait)'},
        'motion-ok': {'raw': '(prefers-reduced-motion: no-preference)'},
      }
    }
  }
}

然后您可以使用 landscape:grid-cols-2 或 motion-ok:transition 这样的类。