Tailwind Mastery
Course description
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
Watch Online Tailwind Mastery
All Course Lessons (21)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | A taste of Tailwind Demo | 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 |
Unlock unlimited learning
Get instant access to all 20 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
CSS Animations & Transitions
Advanced CSS & JavaScript Projects
10 Mega Responsive Websites with HTML, CSS, and JavaScript
