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

Watch Online Tailwind Mastery

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

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...
Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass

Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass

Sources: udemy
Have you have been taking courses that are not up to date or courses that after finishing them you will immediately know that is not what they promised to be in
95 hours 30 minutes
Web Developer Bootcamp with Flask and Python in 2022

Web Developer Bootcamp with Flask and Python in 2022

Sources: udemy
Welcome to the Web Developer Bootcamp with Flask and Python! In this course, you'll learn how to build and deploy dynamic websites using Python, Flask, MongoDB,
19 hours 57 minutes 43 seconds
CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

Sources: udemy
Course consists of several sections. You will start from CSS essentials, in which you will meet some basic topics. Then after finishing basic part, you will move on to advanced ...
11 hours 31 minutes 23 seconds