Mazwei Docs

Appearance

自定义屏幕 ​

为您的项目自定义默认断点。

配置自定义屏幕 ​

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

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

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 配置：

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

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

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

添加更大的断点 ​

添加额外的更大断点的最简单方法是使用 extend 键：

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

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

添加较小的断点 ​

如果您想添加额外的小断点，您不能使用 extend ，因为小断点将被添加到断点列表的末尾，并且断点需要按照从最小到最大的顺序进行排序，以便与最小宽度断点系统一起按预期工作。

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

js
const defaultTheme = require('tailwindcss/defaultTheme')

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

我们在 tailwindcss/defaultTheme 处公开默认主题，这样您就不必自行维护默认断点列表。

使用自定义屏幕名称 ​

您可以随意命名自定义屏幕，并不受 Tailwind 默认使用的 sm / md / lg / xl / 2xl 约定的限制。

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 中使用它们现在会是这样的：

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

高级配置 ​

默认情况下，断点是最小宽度，以鼓励移动优先工作流程。如果您需要更多控制您的媒体查询，您也可以使用对象语法来定义它们，这样您可以指定明确的最小宽度和最大宽度值。

最大宽度断点 ​

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

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

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

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

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

多范围断点 ​

有时，将单个断点定义应用于多个范围可能很有用。

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

js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // 侧边栏出现在 768px 的位置，因此在 768px 和 868px 之间恢复
        // 使用 `sm:` 样式，之后主内容区域的宽度又足以应用 `md:` 样式。
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

自定义媒体查询 ​

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

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

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

Released under the MIT License.

Copyright © 2019-present Mazwei