Typing Words
Usage
Properties
Animation
The typing-words
cursor styles use keyframe animation which by default is set using the tailwindcss class.
Add the following animation
to your tailwind.config.js
file:
import { PluginAPI, type Config } from "tailwindcss/types/config";
import plugin from "tailwindcss/plugin";
export default {
theme: {
extend: {
animation: {
"cursor-bar": "cursor-bar 0.5s step-end infinite alternate, cursor-blink 0.5s infinite"
},
keyframes: {
"cursor-bar": { "50%": { borderRightColor: "transparent" } },
"cursor-blink": {
"20%": { transform: "scaleY(1)" },
"50%": { transform: "scaleY(0)" },
"80%": { transform: "scaleY(1)" }
}
}
}
},
plugins: [
require("tailwindcss-animate"),
plugin(({ addBase, addUtilities }: PluginAPI) => {
addBase({});
addUtilities({});
})
]
} satisfies Config;
API
Styles API
Styles API | Type | Default | Annotation |
---|---|---|---|
unstyled? | boolean | false | if true , all default styles will be removed |
Props API
Props API | Type | Default | Annotation |
---|---|---|---|
placeholders | string[] | - | required |
el? | React.ElementType | "div" | |
withCursor? | boolean | false | added style cursor animation |
duration? | {break?: number; typing?: number; deleting?: number; pauseBeforeDelete?: number;} | 200 | set duration break and running typing |