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>
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
// 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>
::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 |