Tailwind CSS Clipboard

Installation

1. Install Clipboard

   Install clipboard via npm

   Terminal

                             
                               npm i clipboard
                             
                           

2. Add the Clipboard JavaScript

   Include the JavaScript <script> near the end of your </body> tag:

   <script src="./assets/vendor/clipboard/dist/clipboard.min.js"></script>
   HTML

3. Add the Preline Helper JavaScript

   Include the JavaScript <script> after the helper-clipboard.js file.

   <script src="./assets/vendor/preline/dist/helper-clipboard.js"></script>
   HTML

Copy text

Copy static text directly from a button or trigger element.

Copy input value

Copy the current value of an input field to the clipboard.

Clipboard with tooltip

Show clipboard feedback in a tooltip after the copy action succeeds.

Customize the tooltip message shown after copying.

Clipboard in modal

Use clipboard actions inside a modal without changing the interaction pattern.