A plugin for Tailwind CSS that generates typewriter style text animations in pure CSS (no JavaScript required) โจ
This plugin has been tested with Tailwind CSS v3. Previous releases may also work but are not officially supported.
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')
// ...
]
};
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>
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.
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.
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>
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
}
}
})
]
};
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.
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'],
// ...
}
}
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 |