Styling

Load the shared CSS once

The React package exports behavior and typed APIs; @pimolu/web-styles exports the generated shared stylesheet. Pimolu does not require Tailwind to style its components. This website uses Tailwind for its own application layout.

Build assets from the workspace before importing generated theme and style exports. Modify their source data or styles, then regenerate; never hand-edit dist files.

Keep layout local

Use Stack, Flex, Grid or your application's CSS for spacing and responsiveness. Inspect each component's API: className and containerClassName may target different elements. Input, for example, distinguishes the input from its surrounding field wrapper.

.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pimolu-spacing-3, 12px);
}

@media (max-width: 480px) {
  .account-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

Scope your refinements

Prefer public props and semantic variables before targeting internal component classes. Keep a page-specific override inside an application class. Broad selectors can accidentally restyle nested components, such as Tabs inside a documentation preview.

CSS layers determine precedence before specificity. The website places Pimolu component styles before its local components and utility layers, without Tailwind Preflight resetting library defaults.