playlistduration

Tailwind CSS Tutorial

by Net Ninja · 19 videos

Total watch time

2h

at 1× speed · exactly 1 hour, 59 minutes, 49 seconds at 1×

1×1h 59m 49s
1.25×1h 35m 51s
1.5×1h 19m 53s
1.75×1h 8m 28s
2×59m 55s
Average video6m 18s
Longest13m 41s
Shortest1m 42s
Compare Open on YouTube JSON

Plan to finish

About 2 days at an hour a day

Pick a daily pace and the days you'll watch. Ticked videos are skipped.

Days

At one hour a day, every day, this playlist takes about 2 days. Turn on JavaScript to plan around your week.

Videos (19)

2h in total · tick what you've watched

Tick videos you've watched — progress is saved in this browser.

Videos to
Watched
1 Tailwind CSS Tutorial #1 - Intro & Setup 13:41 2020-07-06
2 Tailwind CSS Tutorial #2 - HTML Template 10:02 2020-07-06
3 Tailwind CSS Tutorial #3 - Fonts & Colors 8:43 2020-07-06
4 Tailwind CSS Tutorial #4 - Margin, Padding & Borders 7:05 2020-07-07
5 Tailwind CSS Tutorial #5 - Tailwind Config 11:16 2020-07-08
6 Tailwind CSS Tutorial #6 - Custom Fonts 4:05 2020-07-10
7 Tailwind CSS Tutorial #7 - Using Flexbox 6:41 2020-07-10
8 Tailwind CSS Tutorial #8 - Responsive Classes 5:45 2020-07-13
9 Tailwind CSS Tutorial #9 - Cards 6:51 2020-07-13
10 Tailwind CSS Tutorial #10 - Badges 3:37 2020-07-15
11 Tailwind CSS Tutorial #11 - @apply Directive 3:47 2020-07-15
12 Tailwind CSS Tutorial #12 - Grids 6:49 2020-07-16
13 Tailwind CSS Tutorial #13 - Buttons 4:44 2020-07-17
14 Tailwind CSS Tutorial #14 - Icons 5:22 2020-07-17
15 Tailwind CSS Tutorial #15 - Hover Effects 3:45 2020-07-20
16 Tailwind CSS Tutorial #16 - Responsive Nav (part 1) 4:50 2020-07-20
17 Tailwind CSS Tutorial #17 - Responsive Nav (part 2) 7:15 2020-07-21
18 Tailwind CSS Tutorial #18 - Transitions 3:49 2020-07-22
19 Tailwind CSS Tutorial #19 - Wrap Up 1:42 2020-07-22

Embed a badge

Show the watch time in a README or course description — it links back here and updates itself

Watch time: 2h · 19 videos

Markdown
[![Watch time: 2h · 19 videos](https://playlistduration.com/badge/playlist/PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw.svg)](https://playlistduration.com/playlist/PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw)
HTML
<a href="https://playlistduration.com/playlist/PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw"><img src="https://playlistduration.com/badge/playlist/PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw.svg" alt="Watch time: 2h · 19 videos" width="175" height="20"></a>

Add ?speed=1.5 to the image URL for the time at that speed, ?label=Course to change the left text, or ?style=flat-square for square corners.

Want the numbers themselves? GET https://playlistduration.com/api/v1/playlist/PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw returns them as JSON — free, no key. API docs →

Data from the YouTube Data API as of 2026-09-22 (cached). Private or deleted videos are excluded from totals.