交互
用于控制如何调整元素大小的工具。
¥Basic usage
¥Resizing in all directions
使用 resize
使元素水平和垂直可调整大小。
¥Use resize
to make an element horizontally and vertically resizable.
拖动演示中的文本区域句柄以查看预期的行为
<textarea class="resize rounded-md"></textarea>
¥Resizing vertically
使用 resize-y
使元素垂直可调整大小。
¥Use resize-y
to make an element vertically resizable.
拖动演示中的文本区域句柄以查看预期的行为
<textarea class="resize-y rounded-md"></textarea>
¥Resizing horizontally
使用 resize-x
使元素可水平调整大小。
¥Use resize-x
to make an element horizontally resizable.
拖动演示中的文本区域句柄以查看预期的行为
<textarea class="resize-x rounded-md"></textarea>
¥Preventing resizing
使用 resize-none
防止元素被调整大小。
¥Use resize-none
to prevent an element from being resizable.
请注意,文本区域句柄消失了
<textarea class="resize-none rounded-md"></textarea>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:resize
to only apply the resize
utility on hover.
<div class="resize-none hover:resize">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:resize
to apply the resize
utility at only medium screen sizes and above.
<div class="resize-none md:resize">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.