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 */
}
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;
}