Make a typewriter effect with TailwindCSS in 5 minutes

Typewriter animations are often done with Javascript. But, we can easily achieve one with TailwindCSS.

Simple Typewriter

Tailwind Play: https://play.tailwindcss.com/17LendGXa0

CSS

<h1 class="relative w-[max-content] font-mono
before:absolute before:inset-0 before:bg-white
before:animate-typewriter
">Hello World</h1>

This code snippet generates the typewriter. Don’t forget to add the typewriter animation below!

To make it work properly, make the background color of the ‘before’ pseudo element the color of the background behind it.

Since the text should first be invisible, the h1 is being covered by the ‘before’ pseudo element. With the animation the text is revealed step-by-step. You have to use a Monospace font so nothing gets messed up when the text is revealed.

TailwindCSS Config (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: "typewriter 2s steps(11) forwards"
      },
      keyframes: {
        typewriter: {
          to: {
            left: "100%"
          }
        }
      }
    },
  },
  plugins: [],
}

In the tailwind.config.js file we add the typewriter animation. Feel free to modify the duration; I have chosen it as 2 seconds.

You only need to change the 'steps(n)' value, where 'n' represents the number of letters (including whitespace!).

Therefore “Hello World” is 11 letters, so I wrote steps(11).

Adding a caret

(yes, the blinking vertical line is called caret)

Tailwind Play: https://play.tailwindcss.com/FSWpXQA9Dg

CSS

<h1 class="relative w-[max-content] font-mono
before:absolute before:inset-0 before:animate-typewriter
before:bg-white
after:absolute after:inset-0 after:w-[0.125em] after:animate-caret
after:bg-black">Hello World</h1>

The caret is the ‘after’ pseudo element. While the text is being written, it does not blink, like a real caret.

TailwindCSS Config (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: 'typewriter 2s steps(11) forwards',
        caret: 'typewriter 2s steps(11) forwards, blink 1s steps(11) infinite 2s',
      },
      keyframes: {
        typewriter: {
          to: {
            left: '100%',
          },
        },
        blink: {
          '0%': {
            opacity: '0',
          },
          '0.1%': {
            opacity: '1',
          },
          '50%': {
            opacity: '1',
          },
          '50.1%': {
            opacity: '0',
          },
          '100%': {
            opacity: '0',
          },
        },
      },
    },
  },
  plugins: [],
}

In the tailwind.config.js file we add the blink keyframes and the caret animation.

The caret animation first animates the caret like the typewriter, so that it is in front of the text. After the typewriter animation has finished, the blink animation begins. That’s because it has a delay of 2 seconds, which is also the duration of the typewriter animation.

Hope you found it helpful!

Comments

[Tonyac-create]

Hello, it's work for me but we have many lines so I want the cursor at the end of a line dissapeared. And I can't find the method.