Repository files navigation

A plugin forTailwind CSS to generate text typing animations.

See it in action in the Tailwind Playground forTailwind CSS v3.x and forTailwind CSS v4.x

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

npm i -D tailwind-plugin-typed

Add the plugin to yourconfiguration

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

Add the plugin to your CSS via the@plugin directive

@import"tailwindcss";@plugin"tailwind-plugin-typed";

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

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

@import"tailwindcss";@plugin"tailwind-plugin-typed" {delimiter:';',  typeLetterDuration:0.1,  pauseAfterWordDuration:2,  deleteLetterDuration:0.05,  pauseAfterDeletionDuration:1,}

This plugin utilisesarbitrary values of Tailwind CSS on the base classtyped to generate a typing animation with CSS.

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

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

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

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

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

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

One or multiple sentences can be typed as well. Just write an underscore_ instead of a space as decribed in thetailwind docs.

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

There are utilitiestyped-caret-color,typed-caret-width andtyped-caret-space to adjust the caret.

<p>Caret<spanclass="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>

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

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

This plugin addsalternative text to thecontent of the pseudo element upon typing so that screen readers canhopefully 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 theusers preference regardingreduced motion.

This example will render a typing animation of the stringno 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 textreduce will be rendered.

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

This project is heavily inspired by other awesome projects like:

• Typed.js
• Typed.css