Tailwind Mastery
Since 2016 I've made a living teaching JavaScript UI development
Build UI About this course
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.
Lifetime Access
What you'll learn
A taste of Tailwind
Get acquainted with Tailwind's utility-first approach by building a custom message component.
Scaffolding a multipanel layout
Use Tailwind's grid utilities to make an application layout with fixed and flexible panels.
Making nested panels scrollable
Choose which flexbox panels should scroll when their contents overflow their container.
Customizing colors
Learn best practices for overriding and extending Tailwind's default colors with your brand's palette.
Adding custom fonts
Override the default typefaces used by Tailwind with an imported font.
Building a server selector with SVG
See how to maintain a utility-first workflow when styling icons by working with inline SVG elements.
Transitioning rounded corners
Generate a one-off corner transition using the Just-In-Time engine.
Styling active links
Conditionally apply classes to target different application states.
Building the active indicator
Use groups to style child elements based on an ancestor's pseudostate.
Eliminating duplication with components
See how a reusable component removes duplicate classes without the need for a CSS architecture.
Building the server header
Customize Tailwind's shadows to recreate Discord's floating header.
Styling the channel list
Learn how to use spacing and group utilities to style a list of dynamic items.
Dynamic categories and channels
Map over JSON data to dynamically build up the channel list.
Styling the active channel
Use nested router segments to build an active channel link.
Using a state variable to style unread channels
Style a channel's unread state using a simple pattern to improve readability.
Animated collapsible categories
Use React state and Tailwind transitions to animate a collapsed category's icon.
Controlling layout with truncated text
Use the truncate utility to control which panel grows or shrinks based on the available space.
Using the forms plugin to style the search box
Learn how to work with @tailwindcss/forms to recreate Discord's search box.
Styling dynamic messages with components
Round out the app by replacing the remaining static text and links with dynamic data.
Dynamic server and channel links
Round out the app by replacing the remaining static text and links with dynamic data.
Hiding desktop navigation on mobile screens
Use Tailwind's mobile-first responsive utilities to customize the interface on small screens.
