Design System

Tailwind CSS

Tailwind CSS uses a CSS-first configuration, letting you define your design tokens with the @theme directive directly in your CSS. This makes your theme portable, maintainable and easy to customize.

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme {
  /* Your custom design tokens go here */
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Breakpoints

Use the --breakpoint-* theme variables to customize your breakpoints.

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme {
  --breakpoint-3xl: 1920px;
  --breakpoint-4xl: 2560px;
  --breakpoint-5xl: 3840px;
}

Popup height Soon

Two theme variables cap how tall a popup may grow. They are ceilings rather than fixed heights: where the underlying popper reports the space it has, the component takes whichever is smaller, so a popup near the edge of the viewport shrinks and scrolls its content instead of overflowing. Select with content.position="item-aligned" is the exception — the popper reports no available height there, so only the ceiling applies.

They are separate on purpose. A list is bounded in absolute units because its readable length does not depend on the window; a menu is bounded relative to the viewport so it never dominates the screen. Lengthening an autocomplete should not resize your context menus.

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme {
  /* Show more results before scrolling */
  --max-height-popup-list: 56rem;
  /* Keep action menus shorter */
  --max-height-popup-menu: 30vh;
}

Semantic colors