Engine guides

Design systems

Pick a base engine here; it drives the Components preview, token hints, and export naming.

ActiveTailwind CSSUtility-first CSS; tokens map to config / CSS variables and class vocabulary.Utilities reference CSS variables or theme.extend aliases. Primary → theme.extend.colors.brand.primary

Compare

Tailwind CSS documentation
Bootstrap 5 documentation
MUI documentation

Side-by-side

PropertyTailwind CSSBootstrap 5Material UI (MUI)
CSS / bundleJIT, tiny CSS, config + varsFull or partial Sass importsEmotion runtime, tree-shaken
Learning curveVocabulary upfrontGentle on class namesLives in TSX
Theming modeltailwind.config + @theme$vars + --bs-* CSS varscreateTheme palette/shape
EcosystemHeadless UI, Radix, shadcnMature docs & templatesData Grid, X charts, Lab

When to pick which

  • Tailwind — custom layouts, marketing, utility-first CSS with little runtime.
  • Bootstrap — familiar components and variable-based theming for internal tools.
  • MUI — React-heavy apps where rich components and a theme object pay off.

Scenario hints

  • Greenfield React admin / data console → often MUI.
  • Bespoke marketing with art direction → often Tailwind (or Tailwind + headless primitives).
  • Team standardized on BS5 variables → Bootstrap keeps overhead low.

Official documentation

Radius, spacing, and density stay on your tokens — only framework labels and preview surfaces follow the engine you select.