Tailwind Mastery
Tailwind CSS has become one of the most popular ways to style modern web applications, and for good reason. Its APIs make developers feel incredibly productive, and because it's just a set of well-thought-out CSS classes, you can use it entirely from within your frontend components or HTML templates without having to learn any new tooling – or even without opening up a separate file.
In this course you'll learn Tailwind CSS from scratch by building a Discord clone that matches the original interface's spacing, colors, and typography down to the pixel. By the time you finish, you'll know how to build a multi-panel Flexbox layout, pull off advanced hover treatments, work with CSS transitions and transforms, change the interface at responsive breakpoints, customize Tailwind's design tokens, and integrate Tailwind with component-based frameworks like React and Vue.
Watch Online Tailwind Mastery
# | Title | Duration |
---|---|---|
1 | A taste of Tailwind | 09:09 |
2 | Scaffolding a multipanel layout | 07:48 |
3 | Making nested panels scrollable | 05:00 |
4 | Customizing colors | 03:33 |
5 | Adding custom fonts | 06:45 |
6 | Building a server selector with SVG | 05:50 |
7 | Transitioning rounded corners | 04:30 |
8 | Styling active links | 05:09 |
9 | Building the active indicator | 11:24 |
10 | Eliminating duplication with components | 10:06 |
11 | Building the server header | 07:18 |
12 | Styling the channel list | 12:19 |
13 | Dynamic categories and channels | 12:36 |
14 | Styling the active channel | 09:02 |
15 | Using a state variable to style unread channels | 07:30 |
16 | Animated collapsible categories | 04:56 |
17 | Controlling layout with truncated text | 08:26 |
18 | Using the forms plugin to style the search box | 06:02 |
19 | Styling dynamic messages with components | 07:04 |
20 | Dynamic server and channel links | 03:22 |
21 | Hiding desktop navigation on mobile screens | 07:08 |
Similar courses to Tailwind Mastery

The HTML & CSS Bootcamp 2023 Editionudemy

Crash Course: Build a Full-Stack Web App in a Weekend!udemy

CSS Animations & Transitionsleveluptutorials

HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Gridudemy

10 Mega Responsive Websites with HTML, CSS, and JavaScriptudemy

Beginner TailwindChris Sev

Zero to Full Stack Heropapareact.com

CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)udemy
