Resize

    Utilities for controlling how an element can be resized.

    Use to make an element horizontally and vertically resizable.

    Drag the textarea handle in the demo to see the expected behaviour

    Resize - 图2

    Resizing vertically

    Use resize-y to make an element vertically resizable.

    Drag the textarea handle in the demo to see the expected behaviour

      Use resize-x to make an element horizontally resizable.

      Resize - 图5

      Drag the textarea handle in the demo to see the expected behaviour

      Preventing resizing

      Resize - 图7

      Notice that the textarea handle is gone

      1. <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.

      For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

      Breakpoints and media queries

      You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use to apply the resize utility at only medium screen sizes and above.

      1. <div class="resize-none md:resize">
      2.   <!-- ... -->