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

The Ultimate HTML5 & CSS3 Series: Part 1

The Ultimate HTML5 & CSS3 Series: Part 1

Sources: codewithmosh (Mosh Hamedani)
Have you always wanted to learn web development but didn't know where to start? Tired of lengthy, boring and outdated courses? This course is for you. A fun...
2 hours 51 minutes 50 seconds
Complete CSS

Complete CSS

Sources: Andy Bell
Reach a level in development that once seemed impossible with this extensive course from Andy Bell. Senior-level CSS is about more than just syntax You can...
32 minutes 45 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
Understanding HTML and CSS

Understanding HTML and CSS

Sources: udemy
Deeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more. In this course you'll gain a deep understanding of HTML and CSS
17 hours 52 minutes 36 seconds
CSS Animations & Transitions

CSS Animations & Transitions

Sources: leveluptutorials
Welcome to the CSS Transitions course. In this course, you will not only learn the basic techniques, but also dive deeply into creating animations and transitions. In practice, ...
2 hours 9 minutes 35 seconds