Skip to main content

How-to Guides

How-to guides are goal-oriented directions that take you through the steps involved in addressing real-world problems. They're for users who know what they want to do but need guidance on how to do it.

Available Guides​

Customize Component Styling​

Learn techniques for modifying component appearance:

  • Override styles with the class prop
  • Modify component source code
  • Add custom variants

Set Up Dark Mode​

Implement dark mode theming:

  • Configure CSS variables
  • Create a theme toggle
  • Set up Tailwind for dark mode

Snapshot Testing​

Catch unintended visual changes with screenshot testing:

  • Run snapshot tests locally and in CI
  • Review and accept/reject changes
  • Update baselines from CI artifacts
  • Handle flaky tests

Ship Pre-compiled CSS​

Distribute Tailwind CSS from component libraries:

  • Generate and check in pre-compiled CSS
  • Copy CSS to target/css/ via build.rs
  • Import library CSS in consumer projects