Tailwind CSS Clipboard

Copy to clipboard feature for the latest Tailwind CSS. Let your users easily copy text or links with one click.

Basic example

By adding button with data-twe-clipboard-init and data-twe-clipboard-target attribute you can easily make your text copyable.

Type here text to copy

HTML
javascript

        
            
      <div class="flex">
        <div class="relative mb-3 w-full" data-twe-input-wrapper-init>
          <input
            type="text"
            class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
            id="copy-target"
            placeholder="Example label" />
          <label
            for="copy-target"
            class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
            >Type here text to copy
          </label>
        </div>
        <div>
          <button
            id="copy-button"
            type="button"
            data-twe-clipboard-init
            data-twe-clipboard-target="#copy-target"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
            Copy
          </button>
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Clipboard,
        Input,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Clipboard, Input, Ripple });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Copy from element

There is no difference if element is an input or just div element.

Here is text to copy!

HTML
javascript

        
            
      <button
        id="copy-button"
        type="button"
        data-twe-clipboard-init
        data-twe-clipboard-target="#copy-target-2"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Copy
      </button>

      <div id="copy-target-2" class="mt-2">Here is text to copy!</div>

        
            
      // Initialization for ES Users
      import {
        Clipboard,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Clipboard, Ripple });

Copy from data attribute

By adding to target of copying data-twe-clipboard-text you can set text to copy instead of text from text content.

Copy text from data-twe-attr despite of text content.

HTML
javascript

        
            
      <button
        id="copy-button"
        type="button"
        data-twe-clipboard-init
        data-twe-clipboard-target="#copy-target-3"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Copy
      </button>

      <div
        id="copy-target-3"
        data-twe-clipboard-text="This text is from data-twe-attr!"
        class="mt-2">
        Copy text from data-twe-attr despite of text content.
      </div>

        
            
      // Initialization for ES Users
      import {
        Clipboard,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Clipboard, Ripple });

Feedback example

Listen for copied.twe.clipboard event to perform actions, such as displaying feedback message to users.

Type here text to copy

HTML
javascript
umd

ES UMD

        
            
      <div
        id="container-example"
        class="fixed right-0 top-0 z-[2000] me-3 mt-[59px] hidden w-1/4 items-center rounded-lg bg-primary-100 px-6 py-4 text-base text-primary-700 data-[twe-alert-show]:inline-flex dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        data-twe-alert-init
        data-twe-autohide="true"
        data-twe-delay="4000">
        Text copied!
      </div>
      <div class="flex w-full">
        <div class="relative mb-3 w-full" data-twe-input-wrapper-init>
          <input
            type="text"
            class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
            id="copy-target-4"
            placeholder="Example label" />
          <label
            for="copy-target"
            class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
            >Type here text to copy
          </label>
        </div>
        <div>
          <button
            id="myExample"
            type="button"
            data-twe-clipboard-init
            data-twe-clipboard-target="#copy-target-4"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
            Copy
          </button>
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Alert,
        Clipboard,
        Input,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Alert, Clipboard, Input, Ripple });

      const myExample = document.getElementById("myExample");
      const alertInstance = Alert.getInstance(
        document.getElementById("container-example")
      );

      myExample.addEventListener("copied.twe.clipboard", () => {
        myExample.innerText = "Copied!";
        alertInstance.show();

        setTimeout(() => {
          myExample.innerText = "COPY";
        }, 4000);
      });

        
            
      const myExample = document.getElementById("myExample");
      const alertInstance = twe.Alert.getInstance(
        document.getElementById("container-example")
      );

      myExample.addEventListener("copied.twe.clipboard", () => {
        myExample.innerText = "Copied!";
        alertInstance.show();

        setTimeout(() => {
          myExample.innerText = "COPY";
        }, 4000);
      });

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Clipboard, initTWE } from "tw-elements";
        initTWE({ Clipboard });

        
            
        import "tw-elements";

Usage

Via data attributes

Simply add data-twe-clipboard-init attribute to the button to initialize the clipboard component. For ES format, you must first import and call the initTWE method.

HTML

        
            
        <button
          id="copy-button"
          type="button"
          data-twe-clipboard-init
          data-twe-clipboard-target="#copy-target"
          data-twe-ripple-init
          data-twe-ripple-color="light"
          class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
          Copy
        </button>

Via JavaScript

javascript
umd

ES UMD

        
            
        const myClipboard = new Clipboard(document.getElementById('clipboard'), options);

        
            
        const myClipboard = new twe.Clipboard(document.getElementById('clipboard'), options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-clipboard-target="".

Name	Type	Default	Description
`clipboardTarget`	Null / String	`null`	Points an element from which you will copy text.

Methods

Method	Description	Example
`dispose`	Manually deletes an instance of clipboard.	`myClipboard.dispose()`
`getInstance`	Static method which allows you to get the clipboard instance associated to a DOM element.	`Clipboard.getInstance(myClipboardEl)`
`getOrCreateInstance`	Static method which returns the clipboard instance associated to a DOM element or create a new one in case it wasn't initialized.	`Clipboard.getOrCreateInstance(myClipboardEl)`

javascript
umd

ES UMD

        
            
        const myClipboardEl = document.getElementById('myClipboard')
        const clipboard = new Clipboard(myClipboardEl)
        clipboard.dispose()

        
            
        const myClipboardEl = document.getElementById('myClipboard')
        const clipboard = new twe.Clipboard(myClipboardEl)
        clipboard.dispose()

Events

Event type	Description
`copied.twe.clipboard`	This event fires immediately after copying text.

JavaScript

        
            
        const myClipboardEl = document.getElementById('myClipboard')
        myClipboardEl.addEventListener('copied.twe.clipboard', function (e) {
            // do something...
        })

Tailwind Clipboard method

Basic example

Copy from element

Copy from data attribute

Feedback example

Tailwind Clipboard method - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods

Events

Access restricted

To view this section you must have an active PRO account

Tailwind Clipboard method

Tailwind CSS Clipboard

Basic example

Copy from element

Copy from data attribute

Feedback example

Related resources

Tailwind Clipboard method - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods

Events