Styling

TBX uses Tailwind v4 for utility classes and HeroUI v3 for UI components (buttons, modals, tooltips, etc.). Both work together; you can use Tailwind classes on HeroUI components as needed.

• Tailwind CSS documentation
• HeroUI v3 documentation

Custom Colors

Theme colors (backgrounds, accents, borders, etc.) are customised in src/book/custom.css. HeroUI v3 uses CSS variables for theming. Override these for light and dark modes:

:root,
.light,
[data-theme="light"] {
  --accent: oklch(77.83% 0.1175 96.87);
  --background: oklch(97.02% 0.0017 96.87);
  --foreground: oklch(21.03% 0.0017 96.87);
  /* ... */
}

.dark,
[data-theme="dark"] {
  --accent: oklch(77.83% 0.1175 96.87);
  --background: oklch(12.00% 0.0017 96.87);
  --foreground: oklch(99.11% 0.0017 96.87);
  /* ... */
}

Include custom.css in your global CSS after the required library imports. Your src/book/custom.css should start with:

@import "@heroui/styles";
@import "@bside-tech/tbx-ui/styles";

@bside-tech/tbx-ui/styles is required for all exercise components to render correctly. See HeroUI v3 theming for all variables and options.

Styling exercises

Exercise components support two approaches: CSS variables (for colors, spacing, fonts) and classNames (for applying custom classes to specific elements).

Shared CSS variables

All exercises use ExerciseLayout, which defines variables under .tbx-exercise-layout. Override these globally to theme all exercises:

.tbx-exercise-layout {
  --exercise-accent-color: #2563eb;
  --exercise-layout-content-font-size: 20px;
}

Use .dark .tbx-exercise-layout for dark mode.

Exercise-specific variables and classes

Each exercise type has its own scope (e.g. .tbx-yesno, .tbx-pickone, .tbx-crosswords) and documents its CSS variables and classNames keys. See the Catalogue for each exercise's Style section.

• CSS variables — Colors, backgrounds, borders. Example (YesNo): --yesno-option-bg, --yesno-correct-bg, --yesno-wrong-bg.
• classNames — Object prop to pass Tailwind or custom classes to specific elements. Example: { root: 'rounded-xl', button: 'font-bold' }.

Supported classNames keys vary by component (e.g. root, list, item, buttons, button, checkButton, resetButton, result). Each catalogue page lists its keys.