How to create a countdown with Tailwind CSS and JavaScript

#webdev #tutorial #javascript #tailwindcss

Let's recreate the countdown timer from the tutorial with Alpine.js but with vainilla JavaScript.
Read the article, See it live and get the code

Top comments (6)

Ben Sinclair • May 28

You mention Tailwind a couple of times but I can't see any code that uses it, or explanation of why you talk about it?

Also, and this is nit-picky, but... what happens when the countdown passes into daylight savings time?

Fyodor • May 28

what happens when the countdown passes into daylight savings time?

QA background PTSD detected 😉😅

Michael Andreuzza • May 28

We get a plate of seafood 🙂

Michael Andreuzza • May 28

Well, if you read the article a bit you could see I wrote this:

Classes are omited for brevity and clarity

before this HTML:

<div class="countdown-item ...">
 <div class="countdown-value ...">${value}</div>
 <div class="countdown-label ...">${label}</div>
</div>

I wanted to add only the custom classes, because you can style your clock as you want to.

Then at the very bottom you will see this line on the script:

`<div class="..."><div class="...">Countdown has ended!</div></div>`;

The Tailwind CSS classes are there.

Then if you want to to see the whole code, all you have to do is click the link I prove on this line:
See it live and get the code
This lines take you to a blog posts where you can choose to see it live or look at the code, and then if you click to see the code, it will take to the repo where you can see all Tailwind used.