Tailwind CSS Tutorial (Net Ninja)

About this course

Learn the utility-first Tailwind CSS framework by building a responsive web page step by step. Who it's for: web developers who know basic HTML and CSS. These are the free, official videos of the "Tailwind CSS Tutorial" playlist from the Net Ninja YouTube channel (youtube.com/@netninja). All videos belong to Net Ninja; Sikhami is not affiliated with Net Ninja and simply arranges the public playlist into a course, so you can learn one lesson at a time and keep track of your progress.

What you will learn

• Installing Tailwind and how utility classes work • Fonts, colours, sizing and spacing • Customising the Tailwind config • Layout with flexbox and grids • Components such as badges, cards and icons • Responsive navigation and hover and focus states

Course content

1 section · 19 lectures · 1h 59m

1. 1. Tailwind CSS Tutorial

   • Tailwind CSS Tutorial #1 - Intro & Setup13m
   • Tailwind CSS Tutorial #2 - HTML Template10m
   • Tailwind CSS Tutorial #3 - Fonts & Colors8m
   • Tailwind CSS Tutorial #4 - Margin, Padding & Borders7m
   • Tailwind CSS Tutorial #5 - Tailwind Config11m
   • Tailwind CSS Tutorial #6 - Custom Fonts4m
   • Tailwind CSS Tutorial #7 - Using Flexbox6m
   • Tailwind CSS Tutorial #8 - Responsive Classes5m
   • Tailwind CSS Tutorial #9 - Cards6m
   • Tailwind CSS Tutorial #10 - Badges3m
   • Tailwind CSS Tutorial #11 - @apply Directive3m
   • Tailwind CSS Tutorial #12 - Grids6m
   • Tailwind CSS Tutorial #13 - Buttons4m
   • Tailwind CSS Tutorial #14 - Icons5m
   • Tailwind CSS Tutorial #15 - Hover Effects3m
   • Tailwind CSS Tutorial #16 - Responsive Nav (part 1)4m
   • Tailwind CSS Tutorial #17 - Responsive Nav (part 2)7m
   • Tailwind CSS Tutorial #18 - Transitions3m
   • Tailwind CSS Tutorial #19 - Wrap Up1m