tailwind-plugin-typed

A plugin for Tailwind CSS to generate text typing animations.

See it in action in the live demo on Tailwind Play

📦 Installation

Install the package with your preferred package manager (e.g. npm)

npm i -D tailwind-plugin-typed

Add the plugin to your tailwind configuration (e.g. tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ... other tailwind config
  plugins: [
    // ... other plugins
    require('tailwind-plugin-typed'),
  ],
}

⚙️ Options

This plugin exposes some optional options that can be passed in the tailwind configuration

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ... other tailwind config
  plugins: [
    // ... other plugins
    require('tailwind-plugin-typed')({
      delimiter: ';',
      typeLetterDuration: 0.1,
      pauseAfterWordDuration: 2,
      deleteLetterDuration: 0.05,
      pauseAfterDeletionDuration: 1,
    }),
  ],
}

name	description	default
delimiter	character on which strings are split	;
typeLetterDuration	duration in seconds for typing one single character	0.1
pauseAfterWordDuration	pause in seconds after one whole string is typed	2
deleteLetterDuration	duration in seconds for deleting one single character	0.05
pauseAfterDeletionDuration	pause in seconds after one whole string is deleted	1

💻 Usage

This plugin utilises arbitrary values of Tailwind CSS on the base class typed to generate a typing animation with CSS.

caret

This generates a blinking caret in an ::after pseudo element.

<p class="typed-caret">Typed</p>

single string

This generates an infite looping typing and deleting animation of the string world.

<p>Hello <span class="typed-[world] typed-caret"></span></p>

multiple strings

This generates a typing and deleting animation of multiple words one after another. The default delimiter of strings is ; but can be configured in the plugin options.

<p>This is <span class="typed-[cool;awesome;superb] typed-caret"></span></p>

sentences

One or multiple sentences can be typed as well. Just write an underscore _ instead of a space as decribed in the tailwind docs.

<p class="typed-[This_can_type_sentences.;And_then_delete_them…] typed-caret"></p>

adjust the caret

There are utilities typed-caret-color, typed-caret-width and typed-caret-space to adjust the caret.

<p>Caret <span class="typed-[color;width;space] typed-caret typed-caret-color-emerald-400 dark:typed-caret-color-emerald-600 typed-caret-width-4 typed-caret-space-2"></span></p>

escaping the delimiter and special chars

The delimiter can be escaped with a backslash \ in front of it. Then it will be typed out normally. If other reserved characters (e.g. colon :) should be typed, the whole arbitrary value can be wrapped in backticks ` which will be removed automatically

<p class="typed-[`semi:_true\;;semi:_false\;`] typed-caret"></p>

♿️ Notes on a11y

This plugin adds alternative text to the content of the pseudo element upon typing so that screen readers can hopefully read the whole text that is being typed at all times and are not affected by the animation.

Tailwind itself provides modfiers to adjust for the users preference regarding reduced motion.

This example will render a typing animation of the string no preference in case the user does not specify a preferences for reduced motion. In case the users preferes to have an experience with reduced motion the static text reduce will be rendered.

<p>
  prefers-reduced-motion:
  <span class="motion-safe:typed-[no_preference] motion-safe:typed-caret"></span>
  <span class="motion-safe:hidden">reduce</span>
</p>

💕 Thanks

This project is heavily inspired by other awesome projects like:

• Typed.js
• Typed.css