Tailwind Mastery

2h 34m 57s
English
Paid

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

Join premium to watch
Go to premium
# 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

Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwindprotailwind.com (Simon Vrachliotis)Simon Vrachliotis

Category: CSS, Figma
Duration 2 hours 40 minutes 16 seconds
Zero to Full Stack Hero

Zero to Full Stack Heropapareact.com

Category: JavaScript, React.js, Others, CSS, Node.js, GraphQL, Firebase
Duration 101 hours 29 minutes 59 seconds
Beginner Tailwind

Beginner TailwindChris Sev

Category: CSS
Duration 9 hours 33 minutes 19 seconds
Advanced CSS & JavaScript Projects

Advanced CSS & JavaScript Projectszerotomastery.io

Category: JavaScript, CSS
Duration 15 hours 24 minutes 29 seconds
Beyond CSS

Beyond CSSkevin powell

Category: CSS
Duration 18 hours 12 minutes 41 seconds
The Responsive Web Design Bootcamp

The Responsive Web Design Bootcampkevin powell

Category: CSS
Duration 17 hours 36 minutes 12 seconds
Full-Stack Web Developer Bootcamp with Real Projects

Full-Stack Web Developer Bootcamp with Real Projectsudemy

Category: JavaScript, HTML, CSS, Node.js, MongoDB, JQuery
Duration 22 hours 11 minutes 13 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024Academind Pro

Category: JavaScript, Sql, HTML, CSS, Node.js, Vue
Duration 78 hours 51 minutes 55 seconds
Web Developer Bootcamp with Flask and Python in 2022

Web Developer Bootcamp with Flask and Python in 2022udemy

Category: HTML, CSS, Python
Duration 19 hours 57 minutes 43 seconds
Data Visualization + D3.js

Data Visualization + D3.jssuperhi.com

Category: JavaScript, HTML, CSS, D3.js
Duration 16 hours 48 minutes 54 seconds