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
![CSS Simplified](https://cdn.courseflix.net/courses/100x56/css-simplified.jpg?d=1739916510366)
CSS Simplifiedwebdevsimplified.com
![CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)](https://cdn.courseflix.net/courses/100x56/css-bootcamp-master-css-including-css-grid-flexbox.jpg?d=1739916510366)
CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)udemy
![Beyond CSS](https://cdn.courseflix.net/courses/100x56/beyond-css.jpg?d=1739916510366)
Beyond CSSkevin powell
![Complete Web Developer in 2023: Zero to Mastery](https://cdn.courseflix.net/courses/100x56/complete-web-developer-in-2023-zero-to-mastery.jpg?d=1739916510366)
Complete Web Developer in 2023: Zero to Masteryudemyzerotomastery.io
![CSS Animations & Transitions](https://cdn.courseflix.net/courses/100x56/css-animations-transitions.jpg?d=1739916510366)
CSS Animations & Transitionsleveluptutorials
![Full-Stack Web Developer Bootcamp with Real Projects](https://cdn.courseflix.net/courses/100x56/full-stack-web-developer-bootcamp-with-real-projects.jpg?d=1739916510366)
Full-Stack Web Developer Bootcamp with Real Projectsudemy
![Zero to Full Stack Hero](https://cdn.courseflix.net/courses/100x56/zero-to-full-stack-hero.jpg?d=1739916510366)
Zero to Full Stack Heropapareact.com
![Pixel Perfect Figma to Tailwind](https://cdn.courseflix.net/courses/100x56/pixel-perfect-figma-to-tailwind.jpg?d=1739916510366)
Pixel Perfect Figma to Tailwindprotailwind.com (Simon Vrachliotis)Simon Vrachliotis
![Tailwind UI (Application UI + Marketing)](https://cdn.courseflix.net/courses/100x56/tailwind-ui-application-ui-marketing.jpg?d=1739916510366)
Tailwind UI (Application UI + Marketing)adamwathan
![Composing Layouts in React](https://cdn.courseflix.net/courses/100x56/composing-layouts-in-react.jpg?d=1739916510366)