Sign inBuy now
Building the active indicator

Unlock with membership

Buy now

Building the active indicator

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

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!