Sign inBuy now
Adding custom fonts

Unlock with membership

Buy now

Adding custom fonts

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

Tailwind Mastery

21 lessons · 2:29:34

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

Buy this course to access this lesson's summary and source code.

Buy Tailwind Mastery

Buy the course

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

$349
Access all coursesone-time payment

Get lifetime access to every Build UI course, including Tailwind Mastery, forever.

  • Access to all five Build UI courses
  • Full access to all future Build UI courses
  • Summaries with code
  • Video downloads
  • Working code demos
  • Private Discord

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!