Tailwind CSS 缩放
缩放
用于缩放元素的功能类。
|
Class
|
Properties
|
|---|---|
| scale-0 | --tw-scale-x: 0; --tw-scale-y: 0; |
| scale-50 | --tw-scale-x: .5; --tw-scale-y: .5; |
| scale-75 | --tw-scale-x: .75; --tw-scale-y: .75; |
| scale-90 | --tw-scale-x: .9; --tw-scale-y: .9; |
| scale-95 | --tw-scale-x: .95; --tw-scale-y: .95; |
| scale-100 | --tw-scale-x: 1; --tw-scale-y: 1; |
| scale-105 | --tw-scale-x: 1.05; --tw-scale-y: 1.05; |
| scale-110 | --tw-scale-x: 1.1; --tw-scale-y: 1.1; |
| scale-125 | --tw-scale-x: 1.25; --tw-scale-y: 1.25; |
| scale-150 | --tw-scale-x: 1.5; --tw-scale-y: 1.5; |
| scale-x-0 | --tw-scale-x: 0; |
| scale-x-50 | --tw-scale-x: .5; |
| scale-x-75 | --tw-scale-x: .75; |
| scale-x-90 | --tw-scale-x: .9; |
| scale-x-95 | --tw-scale-x: .95; |
| scale-x-100 | --tw-scale-x: 1; |
| scale-x-105 | --tw-scale-x: 1.05; |
| scale-x-110 | --tw-scale-x: 1.1; |
| scale-x-125 | --tw-scale-x: 1.25; |
| scale-x-150 | --tw-scale-x: 1.5; |
| scale-y-0 | --tw-scale-y: 0; |
| scale-y-50 | --tw-scale-y: .5; |
| scale-y-75 | --tw-scale-y: .75; |
| scale-y-90 | --tw-scale-y: .9; |
| scale-y-95 | --tw-scale-y: .95; |
| scale-y-100 | --tw-scale-y: 1; |
| scale-y-105 | --tw-scale-y: 1.05; |
| scale-y-110 | --tw-scale-y: 1.1; |
| scale-y-125 | --tw-scale-y: 1.25; |
| scale-y-150 | --tw-scale-y: 1.5; |
使用
控制元素的缩放，首先使用 transform 功能启用变换，然后使用 scale-{百分比}、scale-x-{百分比} 和 scale-y-{百分比} 功能类指定缩放比例。
<img class="transform scale-75 ...">
<img class="transform scale-100 ...">
<img class="transform scale-125 ...">
<img class="transform scale-150 ...">响应式
要在特定的断点处控制元素的比例，请在任何现有的缩放功能类中添加 {screen}: 前缀。例如，使用 md:scale-75 来应用 scale-75 功能类，只适用于中等尺寸以上的屏幕。
<div class="transform scale-100 md:scale-75"></div>
关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。
自定义
Scale values
默认情况下，Tailwind 提供十个通用规模实用程序。您可以通过编辑 Tailwind 配置的 theme.scale 部分来更改、添加或删除这些。
// tailwind.config.js
module.exports = {
theme: {
scale: {
'0': '0',
'25': '.25',
'50': '.5',
'75': '.75',
'90': '.9',
'95': '.95',
'100': '1',
'105': '1.05',
'110': '1.1',
'125': '1.25',
'150': '1.5',
'200': '2',
}
}
}在主题定制文档中了解更多关于定制默认主题的信息。
变体
默认情况下， 针对 scale 功能类，只生成 responsive, hover and focus 变体。
您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 scale 属性来控制为 scale 功能生成哪些变体。
例如，这个配置也将生成 active and group-hover 变体:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
scale: ['active', 'group-hover'],
}
}
}禁用
如果您不打算在您的项目中使用 scale 功能，您可以通过在配置文件的 corePlugins 部分将 scale 属性设置为 false 来完全禁用它们：
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
scale: false,
}
}