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 TailwindFree

Lesson 19:08

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

Scaffolding a multipanel layoutFree

Lesson 27:47

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

Making nested panels scrollablePro

Lesson 34:59

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

Customizing colorsPro

Lesson 43:32

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

Adding custom fontsPro

Lesson 56:44

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

Building a server selector with SVGPro

Lesson 65:49

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

Transitioning rounded cornersPro

Lesson 74:29

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

Styling active linksPro

Lesson 85:08

Conditionally apply classes to target different application states.

Building the active indicatorPro

Lesson 911:23

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

Eliminating duplication with componentsPro

Lesson 1010:05

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

Building the server headerPro

Lesson 117:17

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

Styling the channel listPro

Lesson 127:17

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

Dynamic categories and channelsPro

Lesson 1312:35

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

Styling the active channelPro

Lesson 149:01

Use nested router segments to build an active channel link.

Using a state variable to style unread channelsPro

Lesson 157:28

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

Animated collapsible categoriesPro

Lesson 164:55

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

Controlling layout with truncated textPro

Lesson 178: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 boxPro

Lesson 186:01

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

Styling dynamic messages with componentsPro

Lesson 197:03

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

Dynamic server and channel linksPro

Lesson 203:21

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

Hiding desktop navigation on mobile screensPro

Lesson 217: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

$99one-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

$149
early bird discountone-time payment

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

  • Courses on Framer Motion, Tailwind, and Remix
  • New videos added weekly
  • 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!