Replies: 2 comments 1 reply
-
|
Yes, I would expect it to have been an intentional design decision. It is explicitly written into the Preflight CSS, with a comment stating it's intended effect: tailwindcss/packages/tailwindcss/preflight.css Lines 298 to 304 in 36417cb Anecdotely, most web interfaces with textareas have the textarea constrain to a certain width (i.e. fill some container). Having the textarea be resizable horizontally usually doesn't look that great, since it would overlap certain other elements or generally look "broken". Of course, the reset is an opinionated default so you can change it on an element-by-element basis or globally for your project. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, and if you want native horizontal resizing back, I would override it explicitly rather than disabling Preflight for the whole project. For one textarea: <textarea class="resize"></textarea>or, if you want only horizontal: <textarea class="resize-x"></textarea>For a project-wide default, put the override in your app CSS after importing Tailwind: @import "tailwindcss";
@layer base {
textarea {
resize: both;
}
}That keeps the rest of Preflight intact while restoring the browser-like behavior for textareas. I would avoid treating this as a browser bug. It is an opinionated reset: Tailwind constrains horizontal resizing because textareas often live inside fixed-width form layouts, where horizontal resize can easily break the surrounding UI. If your app specifically wants the native behavior, |
Beta Was this translation helpful? Give feedback.
-
|
I have that already, my original question was because I could not find documentation about resize: vertical only. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
What version of Tailwind CSS are you using?
v4.2.4
What build tool (or framework if it abstracts the build tool) are you using?
vanilla javascript
What version of Node.js are you using?
N/A
What browser are you using?
Firefox
What operating system are you using?
Windows
Reproduction URL
https://codepen.io/enigma1/pen/ogYYPyR
Describe your issue
Using a textarea html element tailwind activates vertical only resizing, visible in the inspector.
textarea {
resize: vertical;
}
In a Tailwind CSS v4 project, the default browser behavior for <textarea> resizing appears to be overridden by Tailwind’s base styles.
Is this an intentional design decision in Tailwind’s preflight normalization, or an undocumented side effect?
Expected Behavior
In native HTML (without CSS resets), textarea elements are typically resizable in both directions (browser-dependent default behavior), or at minimum should not be constrained unless explicitly styled.
Beta Was this translation helpful? Give feedback.
All reactions