Tailwind CSS Tutorial (Net Ninja)
By Net Ninja
- Course audio
- Course audio: English
- Level
- Beginner
- Length
- 15 lessons
What you'll be able to do
- Style a page with Tailwind utility classes
- Build responsive flex and grid layouts
- Customise the config and create reusable styles with @apply
About this course
Net Ninja teaches Tailwind CSS by styling an HTML template from scratch. After setup, lessons cover fonts and colours, margin, padding and borders, the Tailwind config file, custom fonts, flexbox, responsive classes, cards, badges, the @apply directive, grids, buttons, icons and hover effects. It suits learners who know HTML and basic CSS and want to style pages quickly with utility classes. Afterwards, apply Tailwind in a React or Next.js project.
Before you start: Basic HTML and CSS
Syllabus
Sabaq lists the first 15 videos of this playlist; the rest continue on YouTube. Full playlist on YouTube
- 1Tailwind CSS Tutorial #1 - Intro & Setup
- 2Tailwind CSS Tutorial #2 - HTML Template
- 3Tailwind CSS Tutorial #3 - Fonts & Colors
- 4Tailwind CSS Tutorial #4 - Margin, Padding & Borders
- 5Tailwind CSS Tutorial #5 - Tailwind Config
- 6Tailwind CSS Tutorial #6 - Custom Fonts
- 7Tailwind CSS Tutorial #7 - Using Flexbox
- 8Tailwind CSS Tutorial #8 - Responsive Classes
- 9Tailwind CSS Tutorial #9 - Cards
- 10Tailwind CSS Tutorial #10 - Badges
- 11Tailwind CSS Tutorial #11 - @apply Directive
- 12Tailwind CSS Tutorial #12 - Grids
- 13Tailwind CSS Tutorial #13 - Buttons
- 14Tailwind CSS Tutorial #14 - Icons
- 15Tailwind CSS Tutorial #15 - Hover Effects
What to take next
Videos by Net Ninja, played from their official YouTube channel. Subscribe on YouTube
Official upload by the teacher or institution on their own channel, shown with YouTube's embedded player.
Sabaq lists the first 15 videos of this playlist; the rest continue on YouTube. Full playlist on YouTube
Lessons last checked Oct 2026. Course summary and lesson structure by Sabaq.
Report a problem or a rights request