Design System

Bitrix24 UI's design system uses Tailwind CSS for simple theming and easy customization.
We are still updating this page. Some data may be missing here — we will complete it shortly.

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.

app/assets/css/main.css
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme {
  /* Your custom design tokens go here */
}
Check the Tailwind CSS documentation for all available theme variable customization options.

Breakpoints

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

app/assets/css/main.css
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme {
  --breakpoint-3xl: 1920px;
  --breakpoint-4xl: 2560px;
  --breakpoint-5xl: 3840px;
}
Releases
Published under MIT License.

Copyright © 2024-present Bitrix24