Magic Typing for

A lightweight Tailwind Typing JavaScript is only 2 KB, providing stunning typing effects without burdening your website with overhead.

Tailtyping Javascript

Welcome to the Tailtyping Installation Guide. This document will walk you through the steps to integrate the Tailtyping into your website.

Step 1: Download Tailtyping

Begin by downloading the Tailtyping JavaScript from repository at https://github.com/aribudin/tailtyping. You can either download the repository as a ZIP file or clone it using Git.

Npm

                  
git clone https://github.com/aribudin/tailtyping.git

Step 2: Add Tailtyping.js in Your HTML

In your HTML file, include the Tailtyping JavaScript file, before </body>

                  
<!-- JS -->
<script src="tailtyping/src/js/tailtyping.js"></script>

Step 3: Create HTML Elements

Next, you'll need to create HTML elements where you want to apply the typing effect. For example, if you want to apply the effect to a paragraph, you can set it up like this:

HTML

                  
<!-- Default -->
<p data-typing="true">I'm also a <span data-text="Developer|Creator|Designer"></span></p>

<!-- With data-options -->
<p data-typing="true" data-options='{"typeSpeed": 200, "eraseSpeed": 100, "typeWait": 2000, "eraseWait": 1000}'>Hello, I am a <span data-text="Developer|Creator|Designer"></span></p>

<!-- With custom css -->
<h1 data-typing="true" class="mb-6 text-3xl font-bold leading-snug sm:text-4xl sm:leading-snug md:text-[45px] md:leading-snug [&_.typing-cursor]:text-red-600">
  Magic Typing for <span class="relative" data-text="Developer|Personal|Freelancer">Developer<span class="typing-cursor"></span></span>
</h1>

Step 4: Modify Css (Optional)

Custom tailwind css in your html file and add cursor efect with this css:

CSS

                  
/* Cursor Blink Efect */
.typing-cursor::after {
  font-weight: 400;
  content: '|';
  animation: blink 0.75s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

TailTyping Starter Template

Start development with Tailwind starter template. Open index.html in your browser and run following command:

Npm

                  
npm install

npm run dev

License

You can choose various licenses according to your needs.

JAVASCRIPT

MIT License
Unlimited project
Commercial purpose
Can for build theme
Credit not required
Unlimited developer

Download Free

Frameworks

Developer License
Unlimited project
Commercial purpose
Can for build theme
Credit not required
Unlimited developer

Download 69$

Questions

Here are some of the basic types of questions.

Tailtyping Other Versions

Tailtyping is also available in various javascript frameworks. It is very suitable to help you create products in various frameworks and reach more consumers.

Download All Version 69$