Default Textarea
A basic example of Tailwind CSS Textarea with a placeholder label.
Label
Display a Tailwind CSS Textarea with an associated form textarea label element for better accessibility and user experience.
Hint
Include hint text below a Tailwind CSS Textarea for an additional guidance or context for the textarea field.
Hint text goes here
<div class="w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-32">
Example Label
</label>
<div class="flex flex-col w-full gap-1">
<textarea class="textarea" placeholder="Text" rows="6" value=""></textarea>
<span class="text-xs text-gray-500">
Hint text goes here
</span>
</div>
</div>
</div>
Validation
Utilize Tailwind CSS Textarea validation states based on the form validation status to enhance user feedback and overall form usability.
Disabled
Use the
disabled
attribute of the Tailwind CSS Textarea to indicate non-interactivity.
Sizes - Default
Use the
.textarea-sm
and
.textarea-lg
custom classes to adjust the size of Tailwind CSS Textarea fields, providing flexibility for different design requirements.
Source Code
The following source file manages the CSS styles of the Tailwind CSS Textarea component.
Upon building the assets using
Webpack Build Tools
,
the below file is compiled and added into the
dist/assets/css/styles.css
bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/textarea.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Textarea component. |