Logo Windi CSS

行为

Animation

用于控制元素动画如何使用 CSS 动画的工具类。

none
spin
ping
pulse
bounce
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      },
    },
  },
}

为了添加新动画 @keyframes, 可以在主题配置的 keyframes 部分进行定义：
windi.config.js
export default {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
}

Appearance 
用于控制原生表单样式的工具类。
none
CSS
Box Decoration Break 
用于控制元素跨多行、多列或多页时如何渲染的工具类。
slice
clone
CSS
Caret Color 
用于控制输入光标颜色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    caretColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Caret Opacity 
用于控制输入光标颜色不透明度的工具类。
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      caretOpacity: {
        light: '0.1',
      },
    },
  },
}

Cursor 
用于控制元素悬停时光标样式的工具类。
auto
default
pointer
wait
text
move
help
not-allowed
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    cursor: {
      'auto': 'auto',
      'default': 'default',
      'pointer': 'pointer',
      'wait': 'wait',
      'text': 'text',
      'move': 'move',
      'not-allowed': 'not-allowed',
      'crosshair': 'crosshair',
      'zoom-in': 'zoom-in',
    },
  },
}

Image Rendering 
image-render 工具类定义了当原始图像尺寸放大或缩小时，浏览器是如何渲染图像的。默认情况下，每个浏览器都会尝试使用锯齿来缩放图像，以防止失真，但如何我们希望保留其原始像素化方式，这可能会成为一个问题。
auto
pixel
edge
CSS
List Style Type 
用于控制列表元素样式的工具类。
none
disc
circle
square
decimal
zero-decimal
greek
roman
upper-roman
alpha
upper-alpha
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    },
  },
}

List Style Position 
用于控制列表元素位置的工具类。
inside
outside
CSS
Outline 
用于控制元素轮廓的工具类。
none
white
black
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Outline Solid 
none
white
black
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Outline Dotted 
none
white
black
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      outline: {
        blue: '2px solid #0000ff',
      },
    },
  },
}

你也可以提供一个 outline-offset 值，使用元组 [outline, outlineOffset] 的形式来自定义轮廓工具类：
windi.config.js
export default {
  theme: {
    extend: {
      outline: {
        blue: ['2px solid #0000ff', '1px'],
      },
    },
  },
}

Overflow 
用于控制元素如何处理对于容器来说太大的内容的工具类。
auto
hidden
visible
scroll
x-auto
x-hidden
x-visible
x-scroll
y-auto
y-hidden
y-visible
y-scroll
CSS
Overscroll Behavior 
用于控制浏览器在到达滚动区域边界时行为方式的工具类。
  • 使用 auto 可以使户可以在到达主滚动区域的边界时继续滚动父滚动区域。
  • 使用 none 可以防止在目标区域中滚动触发父元素中的滚动，并且还可以防止滚动超过容器末尾时的“弹跳”效果。
  • 使用 contain 来防止在目标区域中滚动触发父元素中的滚动，但在支持它的操作系统中滚动超过容器末尾时保留“弹跳”效果。
auto
none
contain
x-auto
x-none
x-contain
y-auto
y-none
y-contain
CSS
Placeholder Color 
用于控制占位符文本颜色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    placeholderColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Placeholder Opacity 
用于控制占位符文本颜色不透明度的工具类。
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      placeholderOpacity: {
        light: '0.1',
      },
    },
  },
}

Pointer Events 
用于控制元素响应鼠标事件的工具类。
none
auto
CSS
Resize 
用于控制元素调整大小的工具类。
default
y
x
none
CSS
User Select 
用于控制用户允许选择元素文本的工具类。
none
text
all
auto
CSS
Screen Readers Access 
用于控制提升屏幕阅读器可访问性的工具类。
ClassProperties
sr-onlyposition: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
not-sr-onlyposition: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
Usage 
使用 sr-only 以视觉方式隐藏元素，而不会将其隐藏在屏幕阅读器中：
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

使用 not-sr-only 撤消 sr-only，使元素对视力正常的用户和屏幕阅读器可见。当你想在小屏幕上直观地隐藏某些内容但在大屏幕上显示它时，这会很有用，例如：
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

默认情况下，会为这些工具类生成响应式和焦点可变修饰。你可以使用 focus:not-sr-only 使元素在默认情况下在视觉上隐藏，但在用户使用 Tab 键时可见——对于“跳转到内容”链接很有用：
<a href="#" class="sr-only focus:not-sr-only">
  Skip to content
</a>