Tailwind Mastery

2h 34m 57s
English
Paid

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 21 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: A taste of Tailwind

All Course Lessons (21)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Fundamentals of CSS Flexbox

Fundamentals of CSS Flexbox

Sources: zerotomastery.io
Learn to create flexible and adaptive layouts using Flexbox. Basics of alignment, managing margins, and implementing a real-world project for beginners.
4 hours 7 minutes 34 seconds
Flexbox Simplified

Flexbox Simplified

Sources: kevin powell
Flexbox is a wonderful tool that opens up the world of responsive layouts, but it can be hard to predict exactly what's going to happen when we use it, and it's full of sometime...
4 hours 41 minutes 57 seconds
CSS for JavaScript Developers

CSS for JavaScript Developers

Sources: Josh Comeau
Learn CSS confidently with this interactive course designed for JavaScript developers. Understand CSS systems to enhance your web development skills and...
50 Projects In 50 Days - HTML, CSS & JavaScript

50 Projects In 50 Days - HTML, CSS & JavaScript

Sources: udemy, Brad Traversy
This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HT...
18 hours 13 minutes 45 seconds