Sign inGo Pro
Eliminating duplication with components

Watch this course for $99.

Buy now

Eliminating duplication with components

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

Tailwind Mastery

21 lessons · 2:29:34

  1. 1A taste of Tailwind9:08
  2. 2Scaffolding a multipanel layout7:47
  3. 3Making nested panels scrollable4:59
  4. 4Customizing colors3:32
  5. 5Adding custom fonts6:44
  6. 6Building a server selector with SVG5:49
  7. 7Transitioning rounded corners4:29
  8. 8Styling active links5:08
  9. 9Building the active indicator11:23
  10. 10Eliminating duplication with components10:05
  11. 11Building the server header7:17
  12. 12Styling the channel list7:17
  13. 13Dynamic categories and channels12:35
  14. 14Styling the active channel9:01
  15. 15Using a state variable to style unread channels7:28
  16. 16Animated collapsible categories4:55
  17. 17Controlling layout with truncated text8:25
  18. 18Using the forms plugin to style the search box6:01
  19. 19Styling dynamic messages with components7:03
  20. 20Dynamic server and channel links3:21
  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

$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!