Tailwind Mastery
Tailwind CSSTaught 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
Lesson 19:08
Get acquainted with Tailwind's utility-first approach by building a custom message component.
Lesson 27:47
Use Tailwind's Flexbox utilities to make an application layout with fixed and flexible panels.
Lesson 34:59
Choose which Flexbox panels should scroll when their contents overflow their container.
Lesson 43:32
Learn best practices for overriding and extending Tailwind's default colors with your brand’s palette.
Lesson 56:44
Override the default typeface used by Tailwind with an imported font.
Lesson 65:49
See how to maintain a utility-first workflow when styling icons by working with inline SVG elements.
Lesson 74:29
Generate a one-off corner transition using the Just-In-Time engine.
Lesson 911:23
Use groups to style child elements based on an ancestor's pseudostate.
Lesson 1010:05
See how a reusable component removes duplicate classes without the need for a CSS architecture.
Lesson 117:17
Customize Tailwind's shadows to recreate Discord's floating header.
Lesson 127:17
Learn how to use spacing and group utilities to style a list of dynamic items.
Lesson 1312:35
Map over JSON data to dynamically build up the channel list.
Lesson 157:28
Style a channel's unread state using a simple pattern to improve readability.
Lesson 164:55
Use React state and Tailwind transitions to animate a collapsed category's icon.
Lesson 178:25
Use the truncate utility to control which panel grows or shrinks based on the available space.
Lesson 186:01
Learn how to work with @tailwindcss/forms to recreate Discord's search box.
Lesson 197:03
Extract two versions of our component from Lesson 1 to render each channel's messages.
Lesson 203:21
Round out the app by replacing the remaining static text and links with dynamic data.
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
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!