


Watch this course for $99.
Buy nowEliminating duplication with components
See how a reusable component removes duplicate classes without the need for a CSS architecture.
21 lessons · 2:29:34
- 1A taste of Tailwind9:08
- 2Scaffolding a multipanel layout7:47
- 3Making nested panels scrollable4:59
- 4Customizing colors3:32
- 5Adding custom fonts6:44
- 6Building a server selector with SVG5:49
- 7Transitioning rounded corners4:29
- 8Styling active links5:08
- 9Building the active indicator11:23
- 10Eliminating duplication with components10:05
- 11Building the server header7:17
- 12Styling the channel list7:17
- 13Dynamic categories and channels12:35
- 14Styling the active channel9:01
- 15Using a state variable to style unread channels7:28
- 16Animated collapsible categories4:55
- 17Controlling layout with truncated text8:25
- 18Using the forms plugin to style the search box6:01
- 19Styling dynamic messages with components7:03
- 20Dynamic server and channel links3:21
- 21Hiding desktop navigation on mobile screens7:07
Buy this course to access this lesson's summary and source code.



Buy Tailwind Mastery
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!