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

Modern HTML & CSS From The Beginning CourseBrad Traversy

Beyond CSSkevin powell

CSS Layout MasterclassNomad Coders

50 Projects In 50 Days - HTML, CSS & JavaScriptudemyBrad Traversy

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

CSS Demystified: Start writing CSS with confidencekevin powell

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

Page Transitionssuperhi.com

Wizard zines. Zine 14 packJulia Evans
