tailwind-typewriter

A plugin for Tailwind CSS that generates typewriter style text animations in pure CSS (no JavaScript required) ✨

Support

This plugin has been tested with Tailwind CSS v3. Previous releases may also work but are not officially supported.

Demo

Installation

Install the plugin:

# Using npm
npm install tailwind-typewriter

# Using Yarn
yarn add tailwind-typewriter

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('tailwind-typewriter')
        // ...
    ]
};

Usage

The quickest, dirtiest way to get started is to insert a <span> with the type-example utility class somewhere in your markup. This will let you verify that everything is working with a built-in example:

<span class="type-example"></span>

Styling

You can style the animation text with the usual Tailwind utilities:

<span class="type-example text-lg text-rose-500"></span>

🗒️ Note: The blinking caret can only be styled using the configuration options below.

Customizing

The above example is essentially useless on its own. In a real world application, you'll probably want to provide your own text etc 😎. If, for example, you want to create an animation that cycles between names of fruit (with a 3 second delay) - you can do the following:

// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('tailwind-typewriter')({
            wordsets: {
                fruit: {
                    words: ['apple', 'banana', 'orange', 'pear', 'strawberry'],
                    delay: 3
                }
            }
        })
    ]
};

<span class="type-fruit"></span>

🗒️ Note: The animation is generated in the ::after pseudo-element so it will be appended to any text inserted inside the <span>. This may or may not be desirable depending on your project.

Multiple Animations

You can create multiple animations in a single project. Each animation is called a 'wordset'. Each wordset has a name, a set of words/phrases, and its own configuration options (see the full API below).

// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('tailwind-typewriter')({
            wordsets: {
                fruit: {
                    words: ['apple', 'banana', 'orange', 'pear', 'strawberry'],
                    delay: 3
                },
                vegetables: {
                    words: ['carrot', 'celery', 'corn', 'potato'],
                    pauseBetween: 5
                }
            }
        })
    ]
};

A unique class is generated for each set as type-{wordset}. For example, to reference the Vegetables animation instead of Fruit, you would use the following:

<span class="type-vegetables"></span>

Singular Animations

This plugin was originally designed to create animations that cycled through a set of words. Sometimes however, you may need to create a simple effect for a single word or phrase. You probably also want this animation to output in a forwards direction, stopping after the last character.

To do this, choose your phrase, then set repeat and eraseSpeed to 0:

// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('tailwind-typewriter')({
            wordsets: {
                fruit: {
                    words: ['Your clever phrase'],
                    repeat: 0,
                    eraseSpeed: 0
                }
            }
        })
    ]
};

A word about performance

Generally speaking, CSS animations are very performant (certainly compared with JavaScript). However, it is worth noting that every letter in a wordset generates a CSS keyframe. This means that if you have a wordset with a large amount of text, this will have some impact on file size and possibly renderer performance. This wont be a problem in most use cases, but in large projects, discretion is strongly advised.

Configuration

wordsets

Currently, this is the only available top-level property. It serves as a wrapper for each wordset grouping. A wordset in essence, is just an object literal with a unique name for the key that contains the necessary configuration options for each animation:

wordsets: {
    fruit: {
        words: ['apple', 'banana', 'orange'],
        // ..
    },
    vegetables: {
        words: ['carrot', 'celery', 'corn'],
        // ...
    }
}

Options

The following options are also available to each individual wordset.

| Option | Description | Accepts | Default | | :------------- | :------------------------------------------------------------------------- | ----------- | ------------------ | | words | A list of words or phrases for each step of the animation. | Array | Built-in Example | | delay | Delays the start of the animation by n seconds. | Number | 1 | | repeat | Repeat the animation n times. -1 for an infinite loop. | Number | -1 | | writeSpeed | Speed per letter during the write phase (n seconds). | Number | 0.3 | | eraseSpeed | Speed per letter during the erase phase (n seconds). 0 to disable. | Number | 0.1 | | pauseBetween | Pause for n seconds between each word. | Number | 4 | | caretColor | Set the color of the caret. | CSS Color | 'currentColor' | | caretWidth | Specify an alternate width for the caret. | CSS Unit | '1px' | | caretSpacing | Space between the last character and the caret. | CSS Unit | '0.1em' | | blinkSpeed | The frequency at which the caret blinks (n seconds). | Number | 0.8 |