Tailwind CSS Textarea Auto Height Plugin API

Installation

To get started, install Textarea Auto Height plugin via npm, else you can skip this step if you are already using Preline UI as a package.

1. Install the plugin

   Install @preline/textarea-auto-height via npm

   Terminal

                             
                               npm i @preline/textarea-auto-height
                             
                           

2. Add the plugin CSS

   @import the plugin's CSS file into your Tailwind CSS file.

   main.css

                             
                               @import "tailwindcss";
                               
                               /* @preline/textarea-auto-height */
                               /* [!code highlight:1] */
                               @import "./node_modules/@preline/textarea-auto-height/theme.css";
                             
                           

3. Add the plugin JavaScript

   Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

   HTML

   <script src="./node_modules/@preline/textarea-auto-height/index.js"></script>

   ---

   Additional Initialization Options

   Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

   HTML (non-auto)

   <script type="module"> // [!code highlight:3] import HSTextareaAutoHeight from "@preline/textarea-auto-height/non-auto.mjs"; new HSTextareaAutoHeight(document.querySelector("#textarea")); </script>

   ---

   Via bundler

   When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

   JavaScript (auto)

                             
                               import "@preline/textarea-auto-height";
                             
                           

   JavaScript (non-auto)

                             
                               import HSTextareaAutoHeight from "@preline/textarea-auto-height/non-auto";
                               
                               HSTextareaAutoHeight.autoInit();
                               
                               // Or initialize a specific element manually
                               const el = document.querySelector("#textarea");
                               if (el) new HSTextareaAutoHeight(el);
                             
                           

Example

A dynamic textarea that automatically adjusts its height based on content.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <textarea data-hs-textarea-auto-height></textarea>
                      
                    

Methods

The HSTextareaAutoHeight object is contained within the global window object

                      
                        const { element } = HSTextareaAutoHeight.getInstance('#textarea-autoheight', true);
                        const destroyBtn = document.querySelector('#destroy-btn');
                        
                        destroyBtn.addEventListener('click', () => {
                          element.destroy();
                        });
                      
                    

Ready to use Components

Textarea Autoheight

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Textarea Autoheight examples