Pro course

Tailwind Mastery

Tailwind CSS
21 Lessons
2h 29m
Sam Selikoff

Taught by

Sam Selikoff

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.

Lessons

A taste of Tailwind9:08

Get acquainted with Tailwind's utility-first approach by building a custom message component.

Scaffolding a multipanel layout7:47

Use Tailwind's Flexbox utilities to make an application layout with fixed and flexible panels.

Making nested panels scrollable4:59

Choose which Flexbox panels should scroll when their contents overflow their container.

Customizing colors3:32

Learn best practices for overriding and extending Tailwind's default colors with your brand’s palette.

Adding custom fonts6:44

Override the default typeface used by Tailwind with an imported font.

Building a server selector with SVG5:49

See how to maintain a utility-first workflow when styling icons by working with inline SVG elements.

Transitioning rounded corners4:29

Generate a one-off corner transition using the Just-In-Time engine.

Styling active links5:08

Conditionally apply classes to target different application states.

Building the active indicator11:23

Use groups to style child elements based on an ancestor's pseudostate.

Eliminating duplication with components10:05

See how a reusable component removes duplicate classes without the need for a CSS architecture.

Building the server header7:17

Customize Tailwind's shadows to recreate Discord's floating header.

Styling the channel list7:17

Learn how to use spacing and group utilities to style a list of dynamic items.

Dynamic categories and channels12:35

Map over JSON data to dynamically build up the channel list.

Styling the active channel9:01

Use nested router segments to build an active channel link.

Using a state variable to style unread channels7:28

Style a channel's unread state using a simple pattern to improve readability.

Animated collapsible categories4:55

Use React state and Tailwind transitions to animate a collapsed category's icon.

Controlling layout with truncated text8:25

Use the truncate utility to control which panel grows or shrinks based on the available space.

Using the forms plugin to style the search box6:01

Learn how to work with @tailwindcss/forms to recreate Discord's search box.

Styling dynamic messages with components7:03

Extract two versions of our component from Lesson 1 to render each channel's messages.

Dynamic server and channel links3:21

Round out the app by replacing the remaining static text and links with dynamic data.

Hiding desktop navigation on mobile screens7:07

Use Tailwind's mobile-first responsive utilities to customize the interface on small screens.

Buy Tailwind Mastery

Learn Tailwind CSS from scratch by building a pixel-perfect Discord clone.

Buy the course

$179one-time payment

Get everything in Tailwind Mastery.

  • 2+ hours of video
  • 21 lessons
  • Private Discord
  • Summaries with code
  • Unlimited access to course materials

Lifetime membership

$249
access all coursesone-time payment

Lifetime access to all current and future premium Build UI courses, forever.

  • Access to our entire course library
  • New videos added regularly
  • Refactoring videos on React
  • Private Discord
  • Summaries with code
  • Full access to all future Build UI courses

What's included

Stream or download every video

Watch every lesson directly on Build UI, or download them to watch offline at any time.

Live code demos

Access to a live demo of each lesson that runs directly in your browser.

Private Discord

Chat with Sam, Ryan and other Build UI members about the lessons – or anything else you're working on – in our private server.

Video summaries with code snippets

Quickly reference a lesson's material with text summaries and copyable code snippets.

Source code

Each lesson comes with a GitHub repo that includes a diff of the source code.

Invoices and receipts

Get reimbursed from your employer for becoming a better coder!